[react] 튜토리얼1. 프로젝트 생성 및 구조 확인하기

프로젝트 생성

먼저 npm에서 제공하는 react 프로젝트를 생성하는 명령어를 실행해야 한다. 해당 명령어는 최초 1회만 실행하면 그 후 실행할 필요는 없다.

npm install -g create-react-app

 

다음은 프로젝트를 생성한다. 설치한 create-react-app 과 함께 본인이 생성할 프로젝트 이름을 함께 적는다. 연습용 프로젝트이기 때문에 임시로 self-practice라고 이름을 지었고, 저 자리에는 어떤 문자열이 와도 상관없다.

create-react-app self-practice

해당 사진과 같이 떴다면 성공한 것이다.

시간이 좀 걸리는데, 기다리고나면 성공적으로 프로젝트가 생성되었을 것이다. 프로젝트의 디렉토리 구성은 우측과 같이 나오게 된다면 성공한 것이다.

 

생성이 완료되었다면, app 자체는 생성한 프로젝트 폴더 안에 들어있으므로, bash 명령어로 폴더 안으로 진입한 후 app을 시작해주면 된다.

cd self-practice
npm start

자동으로 http://localhost:3000 url을 가진 시작 화면이 나올 것이다. 이렇게 되면 생성과 실행이 완료되었다.

---

프로젝트 구조 - public

 

public > index.html이 우리가 보여주게 될 HTML 페이지가 있다. 뭔가 코드가 굉장히 길지만 사실 다 껍데기일 뿐이다. 왜냐하면 우리는 이 APP의 모든 내용을 js파일로 보여줄 것이기 때문이다. index.html의 root id를 가지고 있는 div 안에서 JSX로 작성된 HTML 뷰를 보여주게 된다.

핵심은 여기에 <div id="root"></div>에서 js문법으로 페이지를 작성할 것이라는 것이다. 

 

---

프로젝트 구조 - src

 

react app의 핵심은 전부 src에 있다고 보면 된다. 핵심인 파일은 index.js, App.js, 그리고 css파일 정도가 있다.

 

1. index.js

index.html에 있었던 root id를 가진 div에 들어갈 component의 짜임새를 보여준다. ReactDOM.render() 안에 들어있는 컴포넌트를 차례로 보여줄 것이라는 말이 된다.

코드 상단에 보면 app.js 파일의 app을 import 해오는 모습이 보이고, 기본 코드는 app을 보여주는 것이다.

App.js에 있는 App을 보여준다. 로고가 돌아가는 것이 보인다. 

실험 삼아, app.js를 하나 더 복사해서 app2.js를 생성하고, app2도 import해서 DOM에 component로 추가해보았다.

component가 두개가 되었기 때문에 로고가 두개가 보이는 것을 볼 수 있다.

결론: index.js는 index.html의 div에 보여줄 component의 짜임새가 적혀있다.

 

2. app.js

기본적으로 app.js 파일에는 react의 로고와 함께 react 공식 사이트로 이동할 수 있는 a태그, 그리고 부연설명을 html과 같은 형식으로 작성하고 return해주고 있는 'App 함수' 를 정의해놓았다.

app.js의 초기 모습

컴포넌트는 무조건 app.js의 이름을 가질 필요가 없다. 아까 재미로 만들어 본 app2.js처럼 자유롭게 생성해도 되고, 내부 function의 이름도 자유롭게 입맛에 맞춰서 작성하면된다. 대신 작성 후 index.js에 component로 추가해주어야 볼 수 있다.

 

결론: app.js는 component의 한 종류! 파일 안에 여러개의 function으로 컴포넌트를 만들어도 되고, 새로운 파일을 만들어도 된다.

 

3. css파일들

app.js, index.css와 같은 파일들이 있는데, 이 css파일은 html + css하듯이 import를 해서 사용하기만 하면 된다. 이름을 맞추면 깔끔하겠지만 굳이 이름이 맞지 않아도 import만 잘해주면 상관이 없다.