리액트 구조잡기

리액트 다운로드 => npx create-react-app .
를 진행하면 아래와 같이 자동적으로 여러가지 폴더들을 생성해준다.

 

 

terminal을 열어서 npm run start를 하면 처음 리액트 화면을 만나 볼 수 있다. (감동 ㅠㅠ)

 

리액트의 시작은 package.json에 있는 

"scripts": {

"start": "react-scripts start",

이 부분이 시작된다.

react-script는 src 에 있는 index.js이고 index.js를 보면

ReactDOM.render(

<React.StrictMode>

<App />



</React.StrictMode>,

document.getElementById('root')

);

이런 부분이 있다. 이 말은 root id라는 부분에다가 

app이라는 부분을 채워넣어주겠다는 것인데, 여기서 app은 src/app.js이고

root id는 public/index.html에 가면 id="root"라고 설정해놓은 부분이 있다.

여기 div안에 app.js 파일이 들어간다고 생각하면 된다.

주의 => react의 webpack은 src 폴더 안에 있는 애들만 정리해서 주므로, public 폴더 안에 파일을 넣지 않도록 주의하자.