[React] 웹팩 설치하며 리액트 구동 원리 알기

리액트로 새로 작업을 할 때 npx create-react-app 폴더명또는 yarn create-react-app 폴더명 명령어를 사용해서 시작을 하는데, 

이 명령어를 입력하면 리액트로 작업을 하기위한 준비를 자동으로 해준다.  자동으로 실행되는 과정과 원리를 알아보고 이해하려고 강의를 듣고 정리해본다.  

 

1. package.json 설치

npm init

 

2. 리액트 돔 설치

npm i react react-dom

 

3. 웹팩설치(리액트 할때 필요한 웹팩, 웹팩cil를 설치해줌 

npm i -D webpack webpack-cli

 

이 과정까지 하고 package.json에 들어가보면  잘 설치된걸 확인 할 수 있다.

dependencies에는 실제 서비스에서 쓰이는 것들이 기록되고, 개발에만 쓰이는 것들은 devDependencies에 기록된다.

 

이제 설치된 폴더에 webpack.config.js 파일을 생성한다. 파일 안에 아래 사진에 있는 걸 입력해준다.

리액트는 app.js에 여러개의 컴포넌트들을 모두 합산해서 넣어줘야 작동하는 원리이다. 그렇게 하기 위해서

entry에 합쳐야 하는 파일들을 넣으면 모든 파일을 합산해서 하나의 아웃풋으로 만들어 주면, 출력할 수 있는 형태가 된다. 

 

같은 폴더에 client.jsx 파일을 생성해주고 입력해준다. 불러오고 싶은 컴포넌트도 추가로 써줬음!

package.json에 설치된 리액트, 리액트 돔 불러와 줌

 

기본 index.html 파일도 셋팅해준다.

앞서 설치해 줬던 package.json에 바벨을 추가 해줘야 한다. (바벨 추가 명령어 생략)

바벨이란, 코드 변환기라고 할 수 있다. 세상에는 다양한 브라우저를 사용하는 사람들이 많고 때로는 새로운 문법이 추가 될 경우가 있다. 그때마다 적합한 문법으로 변환해주는 역할을 해준다. 

@babel core : 기본바벨로, 최신 문법을 적용시켜줌 

@babel/preset-env : 각자의 환경에 맞게 변환

@babel/preset-react : jsx문법으로 변환

@babel-loader: 바벨이랑 웹팩을 연결해주는 역할 

 

 

 

---

 

정리해보면, create-react-app을 하면,

 

• 자동으로 entry에 합산해야할 여러 파일들을 모음 
• entry내용을 읽음
• module을 적용 
• 합산된 파일 app.js로 최종 결과를 얻을 수 있음

create-react-app을 사용하면 이 과정을 모르고 쓸텐데 한번 짚고 넘어가니까 리액트의 구동원리를 알고 갈 수 있었다.