React Setting

오늘은 React Setting에 대해서 정리하려고 한다.
저번 시간에 CRA(Create-React-App)을 이용해서 개발 환경을 셋팅해야 하는데, CRA는 리액트 프로젝트를 시작하는데 쉽게 만들어주는 개발 환경 도구라고 생각하면 된다.

첫번째로, 자기가 원하는 폴더에 진입해서 다음과 같이 CRA를 설치할 수 있다.

npx create-react-app <project name>

생성을 하고 나면 npm start 명령어를 이용해 로컬 서버를 열 수 있다.

CRA 기본 폴더 및 파일 구성

• node.modules
  CRA를 구성하는 모든 패키지 소스가 존재하는 폴더

• package.json
  CRA 기본 패키지 외 추가로 설치된 패키지정보(이름: 버전)이 기록되어 있는 파일

• gitignore
  github 에 올리고 싶지 않은 폴더와 파일을 작성하는 파일

index.html vs index.js vs App.js

처음에 CRA로 셋팅하게 되면 src 폴더 안에 3개의 파일이 있는데 이 파일들이 무슨 관계인지 정리해보려고 한다.

index.js

ReactDOM.render(<App />, document.getElementById('root'))

ReactDOM이 사용되는데 React 를 웹사이트에 출력(render) 하는 것을 도와주는 모델 이다 아이디가 root인것을 찾아서 안에다 넣는 의미이다.

index.html

index.html을 열면 <div id="root"></div>가 있다.
결국 react 컴포넌트가 렌더링이 될 때 저 안에 들어가게 된다.

App.js

마지막으로 App.js에는 앞으로 개발할 프로젝트의 중심 컴포넌트이고 실제로 App.js가 화면에 표시된다.