특징
- Virtual DOM(내 돔을 메모리에 저장 후 이전과 비교해서 바뀐 부분만 다시 자동으로 렌더링)
- SPA(페이지 이동시,웹이 아닌 앱처럼 느껴짐)->UX에 좋다.
- 컴포넌트의 재사용,부품 조립을 하듯이 사용할 수 있다.
- UI부분과 컴포넌트 동작 로직을 구분해서 사용하는 데 편하다.(JSX는 렌더링부분을 정의, 나머지 부분에 컴포넌트 상태 및 동작을 분리해서 사용 가능)
- js는 돔 형성과 로직까지 한번에 다뤄야 하기에 렌더링 됐을 때 모습을 한 눈에 파악하기 힘듦, 반면 React는 UI의 모습이 한 눈에 잘 파악되고 그것을 다루는 로직을 따로나눠서 다루기 편하다
CRA 사용 이유
-
리액트 개발 환경 구축을 위해 많은 것이 필요
ex)webpack/babel/HMR(Hot module replacement-코드 변경시 서버 재시작 기능) -
단점 : eslint나 설정 파일 적용 / SSR이 힘듦->주로 SSR필요없는 백오피스 개발시 사용
-
환경 설정 및 SSR 원하면 Next.js설치
-
이미지 파일도 import해오는 게 좋다.import시 이미지 경로에 Hash값 들어가기에 브라우저가 캐싱 효율적으로 가능
-
https로 실행하고 싶다면=>HTTPS=true npm start
superfly