[리액트]

리액트?

1. 라이브러리
2. 컴포넌트로 이루어져 있다.
   • 재사용성↑
3. virtual DOM
   • 속도↑, 부하↓ 
   • 변경된 부분만 DOM에서 바꿔준다.
   • 과정
     • JSX을 렌더링한다. => Virtual DOM이 업데이트 됨
     • diffing과정 => Virtual DOM이 이전 virtual DOM에서 찍어둔 Snapshot과 비교를 해서 바뀐 부분을 찾는다.
     • 바뀐 부분만 Real DOM에서 바꿔준다.

 

리액트 설치과정
npx create-react-app .

※ 이전에는 리액트 앱을 실행하기 위해 webpack, babel을 설정하기 위해 많은 시간이 걸렸다.

• Babel
  • 최신(es6)js 문법을 구형 브라우저에서도 돌 수 있게 변환
• Webpack
  • 복잡하게 된 파일들을 webpack을 이용해서 bundle생성
  • client > src만 관리 (public 폴더는 관리 안함)

※ 현재는 create-react-app Command로 바로 시작할 수 있다.

• npx create-react-app .
  
  • . 의미 : client directory안에 설치하겠다는 의미.