React
react 프로젝트에서 사용되는 환경
- 라우팅 : react-router-dom
- 상태 관리 : redux, mobx, zustand, react-query 등
- 빌드 : webpack, vite
- 테스팅 : eslint, typescript, jest, testing-library 등
Virtual DOM
실제 dom을 메모리에 복사한 것이며, 빈번한 real dom의 변화/조작에 대한 비용을 줄이는 효과를 지님.
real dom이 변화하면 re-render가 발생되며 이에 따라 layout(reflow), repaint가 발생하게 된다.
데이터가 바뀌면 virtual dom의 변경점만 바뀌어 real dom에 적용(reconciliation)하게 된다.
Application 생성
react-create-app vs. vue-cli
위의 두 라이브러리는 모두 react, vue 어플리케이션을 만들기 위한 라이브러리이다. 파일구조도 생성하고 어느정도 비슷한 구조를 구축해준다. 초기 생성된 프로젝트 구조는 어느정도 가이드라인일 뿐 그 외에 설정은 사용자의 기호에 맞게 변경해준다.
SPA (Single Page Application)
전통적인 SSR 방식에서 진화된 형태, Single Page Application은 웹 사이트의 여러 페이지를 하나의 HTML에 담아 동적으로 동적으로 표현한다.
HTML5의 History API를 사용하여 하나의 HTML에서 여러 페이지 이동이 일어난 것처럼 작동하게 한다.
React는 React-Router-Dom을 사용하고, Vue에서는 Vue-Router를 사용한다.
JSX (JavaScript eXtension)
자바스크립트 확장 문법이며, JSX의 장점은 HTML 마크업 구조에 JS 로직을 같이 사용할 수 있다는 것이다.
주로 React에서 (Vue도 JSX를 지원하지만 SFC 구조를 많이 사용.) JSX를 사용하여 화면 UI를 보여준다.
컴포넌트
React는 클래스형 컴포넌트와 함수형 컴포넌트가 모두 지원된다.
컴포넌트의 상호작용
HTML 태그에 마우스 이벤트를 달아 데이터와 컴포넌트, 사용자 이벤트를 서로 상호작용할 수 있다.
React에서는 onClick처럼
on-접두사를 사용하고, Vue에서는v-on:이나@-를 사용한다. Vue에서는 함수 선언을 위해함수명()형태로 넣을 수 있지만함수명으로 넣어 소괄호를 생략해도 바인딩된다.
- React :
<button onClick={} />- Vue :
<button @click="" />
Props
React, Vue 모두 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려준다. props는 immutable이므로 자식 컴포넌트에서는 변경할 수 없다.
참고로 Vue에서는 Emit을 통해 자식 컴포넌트에서 부모 컴포넌트로 값을 올려줄 수 있다. Vue의 props, emit 로직을 하나로 합쳐 양방향 바인딩(v-model)을 구현할 수 있다.
React의 Callback Props와 Vue의 Custom Event는 유사하지만 Custom Event는 Event-Driven Approach를 사용하고 있으며, 추가적인 추상화 계층을 사용한다. 그러므로 정의되지 않는 callback props에 대해 걱정하지 않아도 된다.
State
컴포넌트 안에서 관리/사용되는 변경가능한(mutable) 데이터. React에서는 state가 변경되면 컴포넌트 함수를 평가한 뒤 재실행/리렌더링한다. 그러므로 리렌더링이 필요할 때 컴포넌트 내 state를 변경한다. 즉, React 컴포넌트 렌더링은 state와 연관이 있다.
React에서는 통칭 state라고 부른다. Vue에서는 data(Option-base API 방식), ref/reactive(Composition API 방식)라고 부른다.
컴포넌트 타입
React에는 과거 클래스형 컴포넌트로 사용되었지만 React 16.8버전 이후로 react hook이 나오면서 함수형 컴포넌트로 넘어가는 추세이다. Vue의 Hook과 React의 Hook의 형태는 현재 거의 비슷하다고 생각하며, 구현 형태가 다를 뿐이다.
HOC (High Order Component)
고차 컴포넌트를 사용하여 컴포넌트를 wrapping하는 구조가 존재한다. Hook 형태가 나오기 전에 컴포넌트의 state과 관심사의 분리를 위해 사용된 방법이다. 하지만 많은 wrapping 구조로 인해 depth가 많아지는 waterfall로 인해 데이터 흐름의 파악이 문제가 있으며, 불필요한 nested dom 구조가 발생되는 단점이 존재한다.
React Hook
react 함수형 컴포넌트 구조에서 hoc 구조가 아닌 다른 방식으로 사용하는 방법이 존재한다. 이를 통해 간단한 코드를 통해 구현이 가능하며 hoc의 단점을 극복하고 높은 가독성이 있는 코드의 형태로 로직을 분리할 수 있다.
react의 custom hook은 vue의 composition api와 동일한 방식이다. 용어만 다를 뿐이며, react에서 사용되는 구조와 vue에서 사용되는 구조에서 "상태의 관심사 분리, 유지보수성이 높은 코드"를 위한 방식이다.
TypeScript
React v.17까지 DefinitelyTyped에서 지원하며, @types/react가 릴리즈되었음. v.18은 아직 개발 미정(?)
설치
react에 typescrit를 추가한다.
npm install --save typescript @types/node @types/react @types/react-dom @types/jesttsconfig.json 파일도 생성하여 옵션을 추가한다.
DevTools Extension
- React Developer Tools : React 개발을 위한 툴
- Vue.js devtools : Vue 개발을 위한 툴 (예전에는 Vue 3를 위해 beta 버전의 새로운 확장프로그램을 설치하였으나, 현재는 2때부터 만들어진 프로그램에서 3를 지원하므로 공식 버전을 사용하면 된다. legacy나 beta는 사용X)
반응형 패턴
- React : useState 등과 같은 함수를 사용
- Vue : ref, reactive를 사용
런타임에서는 다르다.
React는 state가 변경됨에 따라 컴포넌트 함수를 재실행하여 렌더링하는 방식을 사용한다.
Vue는 observer 패턴을 사용하여, state는 subscribe되는 객체이며, notify를 받는다. SFC 구조의 vue파일의 <template/>는 컴포넌트 파일 내 state의 암시적인 subscriber이다.
Performance
Profiler를 통해 컴포넌트 렌더링 속도를 측정할 수 있다. React의 렌더링 방식은 state 변경에 따른 컴포넌트 함수 실행인데, 이로 인해 하위 컴포넌트도 또한 리렌더링될 수 있다.
이를 React.memo를 이용하여 만일 하위 컴포넌트가 동일하다면 memoization된 컴포넌트를 재사용하여 렌더링되지 막는 방식이 존재한다.
또한, 컴포넌트 함수가 재실행된다는 것은 함수 내부의 콜스택도 다시 쌓는다는 것이다. 이 때 컴포넌트 함수 내부의 함수도 useCallback을 사용하여 캐싱할 수 있다. 함수 뿐만 아니라 값도 memoization하기 위해 useMemo를 사용한다.
