[ReactJS] 프로젝트 [1] - 준비, Create React App(npx create-react-app)
create-react-app 은 리액트 어플리케이션을 만드는 최고의 방식이다.
이전의 react application은 스크립트를 import 하면서 만들어 기본적으로 우리가 다 해야 했지만 create-react-app 을 사용한다면 ReactJS를 만드는 게 훨씬 더 쉬워질 것이다.
왜냐하면
create-react-app 은 엄청나게 많은 스크립트들과 사전설정들을 유저를 위해서 준비해주기 때문이다
개발 서버에 접근하다거나, 자동으로 새로고침을 해준다거나 즉각적으로 CSS를 적용시켜주는 기능들이 있다. 또한 웹사이트를 publish 할 준비가 된다면 create-react-app 은 publish 하는 명령어도 가지고 있다. 코드를 압축하고 더 빠르게 만든다. 모든 react application을 만드는 사람은 create-react-app 을 이용한다.
필요한 것. Node JS 설치
설치가 잘되었다면 아래와 같이 터미널 창에서 확인이 가능하다.
node -v 와 npx 명령어가 동작함을 확인하여야 한다.
원하는 폴더 위치로 가서
터미널에서 npx create-react-app 파일명(대문자 안됨)
Node.JS의 package.json 에서 우리는 모든 sript 파일을 찾을 수가 있다.
code 폴더명 으로 vscode를 터미널 창에서 곧바로 실행시키자.
package.json의 script를 보면 우리가 실행시킬 수 있는 명령어들을 볼 수 있다. (create-react-app 팀에서 만든 것이다!)
npm run start 혹은 npm start 명령어를 실행시키자. 그러면 development server를 만들게 된다. 자동으로 브라우저가 열리게 되는 것이다.
src 폴더는 내 모든 파일들을 넣는 곳이다.
그중 가장 중요한 것은 index.js 이다.
create-react-app 은 우리 어플리케이션을 가지고 index.html 안에 index.js 가 들어가도록 설정이 되어 있다.
이전부터 해왔던 거지만 이제는 우리가 직접 해줄 필요가 없다.
이렇게 static으로 html에는 없지만 크롬브라우저에서는 보이는 것도 생긴다. 우리를 위해 넣어진 것이다. 달달
create-react-app 을 했을때의 또 다른 장점은 바로 자동 새로고침이다.(auto-reload)
나머지는 이전까지 해온 것과 거의 흡사하다. ReactDOM을 import 하는 것도 말이다.
App 은 그저 함수 컴포넌트이다. 약간의 JSX 가 안에 있는.
불필요한 테스팅 등을 제외하고 아래와 같은 내용만 남도록 나머지를 지워주었다.
세개의 import 와 ReactDOM.render 만 남도록 말이다.
지금 nodeJS로 작업하고 있기때문에 파일을 분리하는게 가능하고 조금더 조직적으로 관리할 수 있게 된 것이다.(node JS를 안쓰면 그게 안되나?) 파일당 하나의 컴포넌트를 포함 시켰다. 즉 차후에 버튼과 같은 하나의 컴포넌트도 하나의 파일로서 관리가 될 것임을 의미한다.
create-react-app 을 하면
이처럼 이렇게 딸려오는게 많다 /src 안에도 이렇게 App.js , index.js 만 남도록 정리해주자.
리액트 어플리케이션을 랜더링해 줄 뿐인 index.js 와 Welcome Back을 랜더링 해줄 App.