리액트를 편하게 쓰려면 react-creat-app을 활용하면 된다. 이는 리액트의 초기 셋업을 완료해 놓은 틀이다. 리액트 앱를 사용할 때에는 많은 라이브러리들이 필요한 데, 이 react-creat-app에 필요한 모듈들이 다 들어있다! 아주 편리한 리액트 기능이라고 생각하면 된다.
1. 프로젝트를 생성하기
폴더 만들기 => 폴더 우클릭후 터미널 열기 => 해당 명령어 입력
npx create-react-app 프로젝트명리액트 프로젝트 생성은 파일 터미널에서 하든, vscode에서 하든 상관없다
다만, 프로젝트를 열때는 vscode에서만 가능하다
npm start위 명령어를 해당 파일 터미널에 쓰면 다음과 같은 이미지가 뜬다.
이 웹페이지는 live server와 비슷하게 내가 수정한 부분을 즉각 반영하여 보여준다.
2. 파일 알아보기
node_modules
프로젝트명 voca를 react-create-app으로 생성했더니 다음과 같은 파일들이 만들어졌다. node_modules의 경우 리액트 파일이 실행되기 위한 모듈들이 모여있는 곳인데, 용량이 커서 git에 올릴때는 올리지 말자. 다행이도 create-react-app을 통해 생성한 프로젝트의 .gitignore에는 포함되어 있다고 한다!(개꿀)
이 모듈 파일이 없어도 npm i를 입력하면 node_modules파일이 다운로드 되기에 걱정할 필요는 없다.
package.json
package.json이라는 폴더는 패키지가 어떤 설정을 갖고 있는지에 대한 정보를 가지고 있다. 프로젝트 이름, 주소, 버전 그리고 react의 버전도 설정할 수 있다. 잘 활용하면 다른 컴퓨터에서도 같은 개발환경 셋팅이 가능하다. (신중하게 수정해야 할 것같은 느낌이 드는군)
public 폴더
react는 웹 애플리케이션이므로 화면에 표시되기 위해서는 HTML파일이 필요하다. public 폴더에 index.html파일이 이 역할을 한다. 우리가 개발한 React가 이 index.html에 표시된다.
src 폴더
source code의 줄임말이다. src폴더를 열면 다음과 같은 파일들이 들어있다. 실제로 개발할 때 코드를 작성하는 부분이다.
index.css / index.js : index.html과 연결된 js파일과 stylesheet로 자바스크립트의 진입점이다.
App.css / App.js : 앱이 실행되는 메인코드와 stylesheet
App.text.js : App.js를 테스트 할때 쓰는 파일. 테스트 안하면 삭제 가능
setupTest.js : 테스팅 라이브러리를 import하는 파일
logo.svg : 앱에서 사용하는 svg파일로 삭제 가능
js코드는 App.js에서 바로 수정해도 되고, src폴더에 새로운 jsx파일을 만들어서 import해도 된다.
무슨 파일을 만들든 jsx형식의 파일을 만들어야 한다. 그리고 그 파일(컴포넌트)를App.js 또는 index.js에 반영해야 한다.
App.js와 Index.js의 차이
react 앱의 진입점으로 사용되는 파일은 index.js이다. 이 파일에서 ReactDOM.render()함수를 사용해 react 앱을 마운트하고, app 컴포넌트를 렌더링한다. 이 렌더링되는 메인 컴포넌트가 App.js이다. 따라서 메인 컴포넌트의 App.js에서 컴포넌트를 넣어도, 바로 index.js에 넣어도 화면에 잘 나온다.
위 파일은 index.js이다. import의 마지막 줄을 보면 chapter7폴더의 Accommodate라는 파일가 import된 것을 볼 수 있다.
또 아래 root라는 변수에 <React.StrictMode>라는 태그 사이에서 같은 이름의 <Accommodate>라는 태그가 들어있다. 그래서 이 앱에서는 <Accommodate>라는 컴포넌트가 실행이 된다.
즉, 내가 랜더링 할 파일을 만들고 나서 이 부분을 꼭 그 파일이름으로 수정해야 한다.
id = "root"가 중요
자세히 보면 root라는 아이디의 DOM이 연결된 것을 볼 수 있는데, 이는 public폴더에 있는 index.html파일에 들어 있다
index.html의 코드인데, id가 root인 div가 들어간 것을 볼 수 있다. 아까 말했듯이 react에 표시되는 것이 이 파일이기 때문에, 우리가 컴포넌트를 만들면 이 root에 반영을 해야 한다. index.js파일에 우리가 작성한 컴포넌트명을 넣으면, 그 안에서 이 index.html파일의 root에 반영이 되어 성공적으로 실행된다.
