[React.js] Create React App

리액트를 다룰 때 다운받고, 관리해야 하는 패키지들이 많다. 그래서 이미 세팅 완료된 패키지인 Boiler Plate를 사용할 것이다.

 

리액트 어플리케이션 만들기

 

 

1. 새로운 폴더를 만든다.

 

 

2.터미널을 이용해서 리액트 프로젝트를 설치한다.

 

방금 만든 폴더를 vscode에 열고, 터미널을 연다.

설치되어있지 않은 패키지를 딱 한번만 쓰고싶을 때 사용하는 도구인 npx를 사용할 것이다.

이와 같이 npx -v를 명령어로 입력하여 버전이 출력되면 설치가 정상적으로 되어있는 것이다.

만약 설치가 되어있지 않다면 , npm install -g npx 를 통해서 설치하면 된다.

 

리액트 프로젝트를 생성하기 위해 

npx create-react-app [프로젝트명]

명령어를 입력한다.

 

나는 여기서 밑에와 같은 에러가 떴다. 

 

그래서 구글링해보니, 리액트를 삭제했다가 다시 다운로드 하라고 해서 

 npm uninstall -g create-react-app

 npm install -g create-react-app

을 순서대로 입력하고, 다시 위의 명령어를 입력하니 정상적으로 수행되었다.

 

이렇게 하면 왼쪽창에 프로젝트명으로 생성된 파일들이 나타날 것이다. 이를 파일탐색기로 열면

사진과 같이 폴더 두개에 감싸져 있는 것을 볼 수 있다. 이를 하나의 폴더로 정리한다.

 

명령어로 npm start를 치면 오른쪽 창과 같은 화면이 뜬다. 이는 리액트 앱을 실행시킨 것이다.

 

리액트 앱을 종료시키려면 ctrl + c를 누르면 된다.

 

 

App.js를 보면, 위에 실행되었던 창의 html이 있는 것을 볼 수 있다.

index.js에서는 App를 import하고 root에 App에서 return받은 값을 넣는 것을 볼 수 있다. 그럼 이 root는 어디에 있냐면

public내에 있는 index.html에 있다. 결론적으로 index.js가 App.js로부터 받은 값을 index.html를 통해서 화면에 띄운다.

 

node_modules는 크기가 매우 크다. 그래서 폴더를 주고 받을때에는 이를 빼고 주고받는다. 이는 package.json안에 관련 정보가 모두 들어있기 때문이다. 만약 폴더를 받았는데, node_modules가 없다면, npm i를 터미널에 입력하여 설치하면 된다.

 

파일들 살펴보기

 

public

• favicon.ico : 화면의 상단 창에 뜨는 아이콘
• robots.txt : 웹사이트에서 경로 수집할 때 기준을 알려주는 파일

 

 v

App.js는 위와 같이 html과 js가 혼용된 것 같은 언어로도 작동한다.

이는 jsx라고 한다. 리액트에선느 jsx문법을 사용한다.

 

또한 export default App은 app이라는 함수를 내보내서 

위와 같이 다른 파일에서 사용할 수 있다. 또한 이러한 방식으로는 한개의 함수만 내보낼 수 있다.

 

출처 : 한입크기로 잘라먹는 리액트