새로운 웹 애플리케이션에 React 대신 Angular나 Vue를 선택해야 하는 이유

저는 경력 전반에 걸쳐 React, Angular 및 Vue의 복잡성을 탐색해 온 사람으로서 이러한 인기 있는 프런트엔드 프레임워크 간의 미묘한 차이점을 이해하게 되었습니다. 이 기사에서는 다음 웹 애플리케이션 프로젝트에서 Angular 또는 Vue를 선택하는 것이 React에 비해 더 구조화되고 확장 가능한 접근 방식을 제공할 수 있는 이유를 간략하게 설명하겠습니다.

1. 템플릿

Angular와 Vue의 템플릿은 로직과 프리젠테이션 간의 문제를 명확하게 분리하여 코드를 더 깔끔하게 만들고 유지 관리를 더 쉽게 만듭니다. JavaScript 로직이 마크업과 얽힐 수 있는 React의 JSX와 달리 Angular 및 Vue 템플릿은 엄격한 분리를 적용합니다. 예를 들어 이를 설명해 보겠습니다.

JSX에 반응:

 return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> );

각도 템플릿:

 <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div>

Vue 템플릿:

 <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div>

2. 바인딩 양식 컨트롤:

Angular와 Vue는 양식 컨트롤을 바인딩하는 간단한 방법을 제공하므로 여러 필드가 있는 양식 데이터를 쉽게 관리할 수 있습니다. 텍스트 입력, 라디오 버튼, 체크박스, 드롭다운 선택 등 4개의 필드가 있는 양식 개체를 만들어 보겠습니다.

모난:

 @Component({ selector: 'app-form', template: ` <form> <input type="text" [(ngModel)]="formData.text" placeholder="Text Input"> <br> <input type="radio" [(ngModel)]="formData.radio" value="option1"> Option 1 <input type="radio" [(ngModel)]="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" [(ngModel)]="formData.checkbox"> Checkbox <br> <select [(ngModel)]="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> `, }) export class FormComponent { formData = { text: '', radio: '', checkbox: false, select: '', }; }

뷰:

 <template> <form> <input type="text" v-model="formData.text" placeholder="Text Input"> <br> <input type="radio" v-model="formData.radio" value="option1"> Option 1 <input type="radio" v-model="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" v-model="formData.checkbox"> Checkbox <br> <select v-model="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </template> <script> export default { data() { return { formData: { text: '', radio: '', checkbox: false, select: '', }, }; }, }; </script>

반응하다:

 const FormComponent = () => { const [formData, setFormData] = useState({ text: '', radio: '', checkbox: false, select: '', }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value, }); }; return ( <form> <input type="text" name="text" value={formData.text} onChange={handleChange} placeholder="Text Input" /> <br /> <input type="radio" name="radio" value="option1" checked={formData.radio === 'option1'} onChange={handleChange} /> Option 1 <input type="radio" name="radio" value="option2" checked={formData.radio === 'option2'} onChange={handleChange} /> Option 2 <br /> <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} /> Checkbox <br /> <select name="select" value={formData.select} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> ); };

React에서 Formik 또는 React Hook Form과 같은 라이브러리를 사용하지 않고 양식 상태를 관리하려면 useState 로 상태 변수를 설정하고 양식 필드가 변경될 때마다 상태를 업데이트하는 핸들러 함수를 작성해야 합니다. 이는 특히 여러 필드가 있는 양식의 경우 상용구 코드를 추가하고 복잡성을 증가시킬 수 있습니다. 양식 라이브러리는 고급 양식 처리 기능을 제공하지만 이를 프로젝트에 통합하려면 추가 설정과 학습이 필요합니다.

제 생각에는 개발자는 양식 라이브러리에 대한 추가 문서를 선택하고 배우는 데 시간을 보내고 싶어하지 않을 수 있습니다. 특히 양식을 처리하는 것이 프런트엔드 개발자의 일반적인 일상 작업인 경우에는 더욱 그렇습니다. Angular와 Vue에 내장된 양식 처리 기능은 더 간단하고 통합된 접근 방식을 제공하므로 개발자는 추가 종속성 없이 애플리케이션 구축에 집중할 수 있습니다.

3. 하위 구성 요소에 액세스:

Angular의 ViewChild , Vue의 refs 및 React의 useImperativeHandle 하위 구성 요소와 상호 작용하는 메커니즘입니다. 세 가지 모두 이를 달성하는 방법을 제공하지만 Angular와 Vue는 React의 문서에서 덜 권장되는 React의 useImperativeHandle 에 비해 더 깔끔하고 직관적인 접근 방식을 제공합니다. 예는 다음과 같습니다.

모난:

 @Component({ selector: 'app-parent', template: ` <app-child #child></app-child> <button (click)="callChildMethod()">Call Child Method</button> `, }) export class ParentComponent { @ViewChild('child') childComponent: ChildComponent; callChildMethod() { this.childComponent.someMethod(); } }

뷰:

 <template> <div> <child ref="child"></child> <button @click="callChildMethod">Call Child Method</button> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { callChildMethod() { this.$refs.child.someMethod(); }, }, }; </script>

반응하다:

 const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ someMethod() { // Method logic }, })); return ( <p>I am a child</p> ); }); const ParentComponent = () => { const childRef = useRef(null); // Access child component's method const callChildMethod = () => { childRef.current?.someMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); };

React에서 기능적 구성 요소 패러다임은 본질적으로 "메서드" 속성이 있는 Angular 클래스 구성 요소 또는 Vue 구성 요소와 같은 "메서드"를 제공하지 않지만 useImperativeHandle 후크 없이 하위 메서드에 액세스하기 위한 더 간단한 접근 방식이 필요합니다. useImperativeHandle 덜 명확할 수 있으며 forwardRef 함수에서 하위 구성 요소를 래핑해야 합니다. 하위 구성 요소 자체를 변경하지 않고 하위 메서드에 액세스할 수 있는 Angular 및 Vue와 달리 React는 유사한 기능을 달성하기 위해 이러한 추가 설정이 필요합니다.

Vue에 대해서도 언급하고 싶습니다. Composition API는 Vue의 비교적 새로운 기술이며 하위 구성 요소에 대한 액세스는 위에서 설명한 것과 약간 다릅니다. 하지만 아직 모든 팀이 프로젝트에 Composition API를 구현하지 않았으며 제가 설명한 접근 방식을 사용하지 않는다고 가정합니다.

제 생각에는 React 대신 Angular나 Vue를 선택해야 하는 세 가지 이유를 설명했습니다.