React 설치

1. React 설치

React를 사용하기 위해서는 먼저 설치를 해야하는데 단순히 React만 설치해서는 사용하기 힘들다. React를 사용하는데 있어서 도와주는 다양한 module들을 설치해야하는데 손쉽게 npx create-react-app 폴더명 명령어를 사용하면 설치할 수 있다.

터미널에 npx create-react-app react-practice을 입력하면 현재 폴더 안에 react-practice라는 React 폴더를 생성할 수 있다.

생성한 폴더를 실행하려면 npm start 명령어를 사용하면 된다. 주의할 점은 실행하길 원하는 폴더의 경로를 반드시 확인해야한다.

---

2. React 폴더 및 파일

React를 설치하면 다양한 폴더 및 파일들이 생성되는데 각 폴더 및 파일은 다양한 기능을 한다.

1) node_modules 폴더, json 파일

node_modules는 node.js 패키지의 구성요소 중 하나로, create-react-app으로 설치한 다양한 외부 module이 들어있는 폴더이다.

package.lock.json과 package.json 파일들은 이 폴더가 어떤 설정들을 갖고 있는지 확인할 수 있는 파일들이다.

node_moudles 폴더는 많은 양의 외부 module이 들어있기 때문에 용량이 매우 크다. 협업을 하거나 깃헙, 구글 드라이브에 올릴 필요가 있을 때 시간이 오래걸린다. 따라서 프로젝트를 공유할 필요가 있을 때 node_modules를 제외하고 보낸 후 json 파일 들을 확인하여 module을 따로 다운받을 수 있다.

2) public 폴더

favicon.ico 파일은 favicon에 필요한 파일이다.

index.html은 브라우저를 열었을 때 가장 먼저 실행되는 html 템플릿 파일이고, index.js가 렌더링한 결과를 보여준다. index.html의 id가 root인 div가 실제로 렌더링 되는 지점이다.

logo192.png, logo512.png, manifest.json 3개의 파일들은 모바일 환경에서 웹브라우저를 볼 때 홈화면에 추가 기능과 같이 어떠한 기능을 할 때 사용되는 파일들이다.

robots.txt 파일은 구글이나 네이버가 웹사이트 정보를 수집할 때 수집 경로를 알려주는 파일이다.

3) src 폴더

src폴더에는 React를 사용하는데 있어서 실제로 작성하는 다양한 js, css파일들이 들어있는데 index.js, App.js를 먼저 살펴보겠다.

터미널에 npm start를 입력해서 React를 실행하면, src폴더 안에 있는 index.js가 실행이 된다. index.js는 public 폴더 안에 있는 index.html의 id가 root인 div요소 안에 App.js 함수가 반환하는 값을 넣어서 화면에 보여주게 한다.

App.js를 살펴보면 js와 html을 합쳐놓은 것 같은 코드이다. 이것을 jsx( javascript syntax extension)라고 하고, js의 확장 문법이다. React를 사용하는데 있어 필수는 아니지만, UI 관련 작업을 할 때 도움이 되어 대부분의 개발자들이 사용하고 있다. 위와 같이 변수를 선언해서 {}안에 넣어서 사용할 수 있다.

App 함수와 같이 jsx를 이용해서 return을 해주는 방식을 Component라고 한다. 이러한 Component를 여러 개 만들어서 사용할 수 있다.

마지막 줄에 export default App;이라는 코드는 Node.js 포스팅에 있던 commonJS와 다른 ES module 방식이다. ES module 방식으로 내포낸 파일은 원하는 파일에서 import APP from './App.js';로 사용할 수 있다. 그리고 export는 한 번만 가능하다.

npm start로 실행을 해보면 화면은 위와 같다.

App.test.js, setupTests.js 파일들은 테스트에 필요한 파일, logo.svg는 기본 React화면에 나오는 React 로고에 대한 이미지 파일, reportWebVitals.js 파일은 성능 측정에 관련된 파일이다.