# React Basics

📌 React & ReactDOM

React를 사용하려면 React와 ReactDOM이라는 라이브러리가 필요하다.

• React : UI를 만들기 위한 라이브러리
• ReactDOM : UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리.
  (실제 HTML 요소를 화면에 불러옴)

참고 | react dom에 대해 이해하기, React 작동 방법

📌 React app 만들기

npx create-react-app 프로젝트명
cd 프로젝트명
npm start

npm, npx, yarn

npm : 패키지 관리

장점 : 배포가 쉽고 종속성을 쉽게 해결함.
단점 : 패키지가 중복으로 설치될 수 있음. 파일이 많아지면 관리하기 어려움.
-> 이 단점을 개선하여 나온 것이 yarn

npx : 패키지 실행

npm에서 제공해주는 도구.
패키지를 임시 설치해서 실행.
npm 으로 설치할 명령어를 줄여줌.
다른 버전의 노드 실행 가능.

yarn : npm 대신 자주 사용

패키지 설치 속도가 빠름.
안전하고 신뢰성이 높음. (yarn.lock 파일 자동 생성)
참고) yarn.lock 파일의 역할 : 최신 버전이 아닌 lock 파일에 저장되어 있는 버전으로 설치를 진행하여 모든 개발자가 동일한 버전을 사용할 수 있도록 도움.

📌 React script 명령어 살펴보기

start

앱을 브라우저에 실행할 때 쓰는 명령어
yarn start 혹은 npm start 로 실행

build

앱을 최적화할 때 쓰는 명령어
yarn build 혹은 npm build 로 실행

• 로컬에서 실행할 때는 상관없지만, 호스팅을 하면 파일이 크기 때문에 실행 속도가 매우 느려질 수 있다. 이때 build 명령어를 사용하면 모든 코드들을 build라는 폴더 안에 html/ css/ js 로 분류해 압축시켜서 최적화할 수 있다.(실행 속도가 빨라짐.)

• build 과정에서 Babel과 Webpack이라는 tool이 도와줌.
  Babel : React 코드들을 다양한 브라우저가 이해할 수 있는 가장 basic한 JS 코드로 압축시킴.
  Webpack : 해당 페이지와 관련된 코드만 실행하도록 코드를 모듈화하여 효율적으로 만들어줌.

참고

개발자 도구 -> Styles -> Rendering -> Paint flashing에 체크하면 어느 부분이 render 되는지를 눈으로 확인할 수 있다.
(render되는 부분만 초록색으로 표시됨.)