- React의 가장 큰 특징은 Virtual DOM의 사용이다.
🍓 기존의 자바스크립트를 이용한 DOM 업데이트는 느렸다.
🍓 많은 양의 DOM 조작에 비효율적인 업데이트가 문제가 되었기에 가상 돔이 등장하였다.- 리액트의 대표적인 세 가지 특징: JSX, Component, Virtual DOM
- CRA(Create React App)는 프로젝트 초기화 도구이다.
- CRA는 리액트 내부의 코드 유출 위험이 있기에 sourcemap의 제거가 필요하다.
- 대규모 프로젝트에 사용하기에 CRA는 적합하지 않을 수 있다. (대신 Next.js 나 Gatsby 사용)
🍉 프로젝트 초기화 도구를 Boilerplate라고도 한다.
🍉 프레임워크, 템플릿, 라이브러리의 차이점- Graph QL : Graph QL은 쿼리 언어로 REST와는 달리 단 하나의 Endpoint만을 가진다.
- 채팅 기능 등에 사용될 수 있다. 다만, REST보다 범용성이 아직 낮다.
- 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트로 UI를 구성할 수 있다.
- 클래스형 컴포넌트가 함수형 컴포넌트보다 메모리 자원을 더 잘 관리/사용한다.
- 클래스형 컴포넌트에서는 this 키워드를 사용해야 한다.
- 클래스형 컴포넌트는 클래스에는 Life Cycle이 존재하기에 디테일한 코딩을 하고자 한다면 class를 사용한다.
- 다만, 함수형 컴포넌트가 훅을 통한 쉽고 간편한 코딩이 가능하다.
- 함수형 컴포넌트와 클래스형 컴포넌트의 가장 큰 차이는 Hooks라는 리액트 코어 라이브러리의 사용 유무이다.
🌽 Life Cycle : mounting / updating / state change / unmounting
🌽 focus -> mount -> unmounting -> blur
🌽 렌더링은 focus -> mount 과정에 일어난다.
- useReducer는 useState의 대체 함수이다.
- useEffect (비동기) / useLayoutEffect (동기, 모든 DOM이 변경 후에 동기적으로 발생한다)
- useContext, useMemo, useRef 등
- useRef는 태그가 하나만 가질 수 있는 속성이었던 id와 유사하다.
- JSX는 javascript의 모든 기능을 포함한다.
- JSX는 XSS(Cross Site Scripting) 공격을 방지할 수 있다.
- JSX는 HTML 방식을 그대로 사용이 가능하다. (컴포넌트와 혼용 가능)
- 리액트는 주로 MVVM 패턴이다.
🍒 MVVM(Model-View-ViewModel)은 react, vue.js, angular 등에서 사용되는 sw 아키텍처 패턴이다.- controller는 store, state, dispatch와 관련이 있다.
🙌🙌🙌🙌