만들면서 배우는 리액트 튜토리얼 - 1.리액트의 특징 및 기본 세팅
이 글은 유튜브와 페이스북에서 활동 중이신
NomadCoder의 ReactJS로 웹서비스 만들기를 듣고
복습하기 위해 정리한 글이다.
즉, 코드와 설명은 거의 비슷하다.
해당 강좌가 알기 쉽게 잘 설명해주니 차근차근 공부하실분들은 강의를 추천하고
빠르게 모르는 부분만 복기하는 목적이라면 이 글을 참고하는 것도 좋을 거라고 생각한다.
1. React의 장점
1.1. 자바스크립트 기반
거의 모든 것이 자바스크립트 기반이기 때문에 다른 프레임워크(angular, vue 등)를
배울 필요가 없다.
또한 자바스크립트이기 때문에 배워서 손해볼 것이 없다.
1.2. Composition
모든 것이 컴포넌트 이기 때문에 구조를 알아보기 쉽고 재사용하기 좋다.
인스타그램의 컴포넌트 구조 예시
1.3. 단방향 Dataflow
항상 Data -> UI 로 단방향이다.
Angular처럼 UI가 data를 수정할 수 없다.
data가 수정되면 UI가 변하고
data가 수정되지 않으면 UI가 변하지 않는다.
즉, 항상 아래의 흐름을 따른다.
data -> data변경 -> UI 변경
2. Movie App
여기서는 아래 사진과 같이 생긴 Movie App을 만들면서 React에 대해 알아볼 것이다.
Movie App은 크게 Movie List, Movie Card(Movie), Movie Poster
이 세가지로 구성된다.
3. Transfiler(Transformer, Module bundler)
우리가 사용하는 코드는 리액트 코드이기 때문에
원래는 이 코드를 자바스크립트로 바꿔주는 툴이 필요하다.
Webpack: 우리는 자바스크립트 버전 중 다양한 편의 기능이 있는ES6를 사용하는데
모든 브라우저가 이를 이해하지는 못한다. 그래서 자바스크립트를 브라우저가
이해할 수 있게 변경해주는 도구가 필요한데 그게 바로 Webpack이다.
Webpack - Module bundler
하지만 여기서는 이런 복잡한 것 대신 create-react-app을 이용할건데
create-react-app은 초보자용으로 페북이 만든 리액트 앱 제작 툴로
내부에 module bundler를 갖고 있기 때문에 webpack같은 툴을 사용할 필요가 없고
이 외 다른 설정도 할 필요가 없다.
설치 방법
리눅스용
먼저 npm으로 create-react-app를 설치하고
$ npm install create-react-app
yarn으로 새로운 create-react-app 앱을 생성한다.
$ yarn create react-app movie_app
그리고 해당 폴더에 들어가서 yarn start를 해주면 끝
$ cd movie_app
$ yarn start
윈도우용
npx로 새로운 create-react-app 앱을 생성한다.
$ npx create-react-app movie_app
그리고 해당 폴더에 들어가서 npm start를 해주면 끝
$ cd movie_app
$ npm start
Or
$ yarn start
다른 설정을 다 해주기 때문에 다른 복잡한 일을 해줄 필요가 없다.
0 comments