리액트 시작하기

졸업프로젝트에서 프론트엔드를 맡게되면서 리액트를 새로 공부하게 되었다.
언제나 새로 공부하는 것은 설레면서도 두려운 법이다.
끝까지 좋은 결과가 있기를 화이팅 🤓

velopert님의 블로그에서 리액트 기초 과정을 보고 리액트를 알아가는 시간을 가졌으며,
해당 포스팅은 위 과정을 이해한대로 정리한 것이다.
(https://velopert.com/reactjs-tutorials)

리액트는 무엇인가?

리액트는 웹 개발 시, 번거로운 DOM 관리와 상태값 업데이트를 최소화하고,
오직 기능 개발, 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해 만들어진 라이브러리이다.
(또 다른 라이브러리로는 Angular, Ember, Backbone, Vue 등이 있다.)

기존 방식 : 양방향 바인딩을 통해 모델에 있는 값이 변하면, 뷰에도 이를 변화 시킴

❗️Mutation(변화)하지 말고 데이터가 바뀌면 뷰를 날리고 새로 만들자!

❓그럼 성능 문제가 발생하지 않을까?

💡 Virtual Dom을 이용해서, 바뀐 데이터는 일단 그려 놓고 이전 데이터와 비교 후 바뀐 부분만 찾아서 바꾸자!

이러한 흐름에서 탄생한 것은 리액트이다.

리액트는 자유도가 높은 라이브러리로, 공식적인 라이브러리는 없지만 써드파티 라이브러리가 존재한다.
라우터 라이브러리: React-router, Next-js, After-js
상태관리 라이브러리: Redux, MobX, fr(e)actal

리액트 프로젝트 시작하기

해당 튜토리얼을 진행하기 위해 필요한 도구들이다.

jQuery에서의 <script src="..."><script> 와 같은 형태는 제한적이다.
따라서 리액트 프로젝트는 Node, yarn, Webpack, Babel등의 도구를 설치하여 프로젝트를 설정해준다.
리액트 프로젝트를 만들게 되면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이다.
여러가지 파일을 한 개로 결합하기 위해서 Webpack이라는 도구를 사용하자.
또한 JSX를 비롯한 새로운 자바스크립트 문법을 사용하기 위해 Babel이라는 도구를 사용한다.

Webpack과 Babel 같은 도구들은 자바스크립트 런타임인 Node.js를 기반으로 만들어져 있다.
Node.js에 포함된 패키지 매니저 도구인 npm의 조금 더 개선된 버전인 Yarn을 사용한다. 더 나은 속도, 더 나은 캐싱 시스템을 위함이다.

1. nvm을 이용하여 npm, node 설치

nvm 설치

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

이후 제대로 작동하지 않을 경우 환경설정 변경
.bashrc 파일 오픈

nano ~/.bashrc

아래 내용을 붙여 넣은 뒤 저장

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

설정 로딩

 source ~/.bashrc

설치 확인 -> 아래와 같은 결과가 나온다면 설치에 성공한 것

> nvm ls
  N/A
  node -> stable (-> N/A) (default)
  iojs -> N/A (default)

nvm 설치

nvm install 12.14.1

버전 확인

> node -v 
v12.14.1
> npm - v
6.13.4

2. yarn 설치

npm install --global yarn

3. create-react-app 설치 및 사용

create-react-app: 리액트 앱을 만들어주는 도구

설치

npm install -g create-react-app

사용

create-react-app hello-react

설치가 성공했다면 아래 명령어를 입력한다.

cd hello-react
yarn start

짠! 된건가?

아무튼 이제부터 react 시작!