해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

설치(create-react-app)

npx

npx 는 npm 이 올라가있는 패키지를 바로 실행해서 설치해주는 도구이다.

create-react-app 을 이용하면 자동으로 폴더가 만들어져있다. 세팅도 완전히 되어있다.

webpack, babel 등을 수동으로 설치해서 개발환경을 구축하려면 상당한 노력이 필요한데, create-react-app 은 쉽고 빠르게 모든 것을 구현해준다.

터미널을 열고 → npm start 로 빌드를 띄워보자.

파일 내부 구성

App.js 로 뭔가를 수정하면 바로바로 사이트에 적용된다. → create-react-app 이 기능해줘서 그렇다.

node_modules 폴더

node_modules 폴더는 이 프로젝트를 실행할 때 사용되는 모드들이 모두 모여있다. 여기에 있는 내용들은 package.json 에 기입되어 있다.

만약 node_modules 폴더를 지우더라도, (폴더를 지우면 빌드 할 수 없음) npm install 만 해주면 그대로 다시 폴더를 설치할 수 있다. package.json 파일만 손실되지 않으면 된다.

깃에 올릴 때도 이 폴더는 업로드 하지 않는다. 크기도 굉장히 크고 파일도 많기 때문이다.

그래도 package.json 파일을 깃에 올려두면, 다른 개발자가 이 파일을 보고 동일한 환경을 구축할 수 있다.

public 폴더

public 폴더는 index.html 파일이 있다.

이 div의 ”id=root” 로 리액트 코드가 실행되서 만들어진 DOM 이 구현된다.

src 폴더

source 폴더에서 대부분의 작업이 진행된다.

index.js 파일이다.

‘”id=root” 의 App 을 랜더링해준다’ 라고 이해하면 된다. ”id=root” 는 index.html 의 부분을 말한다.

./App → App.js 파일을 불러오는 코드다.

이 이미지가 App.js 에 구현된 내용들이다.

App.js

여기서 코드를 수정하면 결과가 바로 브라우저에 반영된다. → Hot Module Replacement(HMR) 라고 한다.