[React]1강 리액트 시작하기
리액트를 사용하는 이유
- 새로고침 없이도 페이지 이동이 자연스럽다.
- 이런 식의 웹페이지를 ‘웹앱(web-app)’이라고 부른다.
- 이런 사이트들은 모바일앱으로 발행하기 쉽다.
- 이러한 웹앱을 만들 때 주로 사용되는 라이브러리에는 React/Angular/Vue가 있는데 리액트는 이 중 가장 사용자가 많은 라이브러리다.
- 앱처럼 뛰어난 UX를 가지고 있으며 일반 웹사이트보다 비즈니스적 강점을 가지고 있다.
- 문법이 약간 어렵고 신문법이 난무한다.
리액트 프로젝트 세팅하는 방법
1.Node.js를 설치한다.
이미 설치되어 있다고 하더라도 최신 버전을 설치하는 것이 좋다.
Nod.js 설치하는 이유
node.js설치하면 npm이라는 툴을 내장하고 있다. npm으로 리액트 프로젝트를 쉽게 생성할 수 있기 때문이다.(npm create-react-app)
2.에디터(VS Code)를 설치한다.
3.작업 폴더를 작성한다.
4.리액트 프로젝트를 생성한다.
터미널 창을 열어서 프로젝트를 생성하는 명령어를 실행한다.
npx create-react-app 프로젝트명
위 명령어를 사용하면 리액트 개발에 필요한 모든 파일이 자동 생성된다.
5.리액트 프로젝트 폴더를 열어준다.
반드시 리액트 프로젝트 폴더를 기준으로 폴더를 열어야한다.
6.프로젝트 미리보기를 한다.
터미널 창을 열어 다음 명령어를 실행한다.
npm start
정상적으로 작동하면 브라우저가 열리고 터미널에 다음과 같이 실행된다.
첫 프로젝트 실행 화면
리액트 프로젝트 구조
| 폴더명/파일명 | 사용 용도 |
|
node_modules
|
라이브러리를 전부 모아둔 폴더 |
| public | 정적인 폴더 보관(static 폴더), 빌드할 때 압축하지 않는 영역. |
| src | 소스 코드 파일 보관. |
| App.js | index.html에 들어갈 코드를 짜는 곳 |
| package.json | 설치한 라이브러리 목록 |
