[React] - 1) React 시작하기

리액트 입문 포스팅은 '리액트를 사용하는 기술' 책으로 시작했음을 밝힙니다.

리액트란?

자바스크립트의 라이브러리인 리액트는, 다른 Vuejs, Angular 등과 달리 'View'에 중점을 두는 라이브러리 입니다.

리액트는 뷰의 한 요소를 찾아가 내부를 수정하는 것이 아니라, 데이터가 변할 때 마다 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 사용합니다. JSON 객체를 이용한다고 했을때 불필요한 파싱과정, 자식 노드를 찾아가는 과정, 이런것을 그냥 다 날려버리고 새로 만드는 식으로 하는 것이죠

.

리액트는 Virtual DOM 이라는 문서 구조를 사용하여, 데이터가 변하여 웹 브라우저에 DOM을 업데이트 할 때 DOM을 직접 수정하는 것이 아닌 DOM 업데이트를 추상화하여 처리 횟수를 줄이는 방식을 사용합니다. 실제로는 다음과 같은 절차를 거치지요.

 

 

1. 데이터가 바뀌었을 때 전체 UI를 Virtual DOM에 리렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용한다.

 

근데 이렇게 데이터가 바뀔 때 마다 모든 UI를 다시 렌더링한다면 느리지 않냐구요?

그렇기 때문에 리액트 개발자들은 다음과 같이 말합니다.

 

 

우리는 다음과 같은 문제를 해결하려고 리액트를 만들었습니다
지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기

 

 

모든 라이브러리와 프레임워크는 서비스 환경에 맞게 사용되어야 합니다. 결국 리액트도 무작정 이게 좋다!가 아니라, 실시간으로 데이터가

자주 변하며, 어플리케이션 구조가 크고, 작업이 복잡하여 동적인 처리가 자주 필요한 경우에 유리하다고 할 수 있습니다.

 

흔한 예로 인스타그램 같은 경우, 실시간으로 하트가 눌리고, 새 게시글이 등록되고, 스토리를 업데이트하는 등 어마어마하게 많은 실시간 작업이 전세계적으로 이루어집니다. 특히 페이스북에서는 한 포스트에 쓰이는 <div> 요소가 100개 가까이 된다고 해요. 이렇게 구조가 큰 웹 어플리케이션에서는 리액트가 유용하게 쓰일 수 있겠죠?

리액트 시작하기

이제 본격적으로 리액트를 시작해 보겠습니다.

저는 자바스크립트 에디터로 VSCODE를, 패키지 매니저로 npm대신 yarn을 사용하기로 하였습니다.

각자 운영체제에 맞는 버전으로 설치해 주세요.(npm을 원하신다면 사용하셔도 상관없습니다!)

 

당연히 에디터도 대세인 vscode를 사용해보는 것 뿐, 각자 사용하시던 에디터를 사용하셔도 무방해요.

 

 

https://yarnpkg.com/en/

https://code.visualstudio.com/

 

 

그다음에 Node.js도 설치해 줍시다!

https://nodejs.org/ko/

 

이제 터미널/CMD에서 잘 설치되었는지 확인해봅시다!

 

$ node -v
v.10.16.3
$ npm -v
6.9.0
$ yarn -v
1.19.1

 

npm은 nodejs 설치시 자동으로 설치됩니다. 설치가 되었으니 이제 리액트 프로젝트를 만들어볼게요!

 

cmd에 다음과 같은 명령어를 입력해보세요.

$ yarn create react-app react-test

 

리액트 프로젝트를 만들 떄는 yarn create react-app <프로젝트 이름> 명령어를 사용합니다.

 

(npm의 경우 npm init react-app <프로젝트 이름>)

 

이제 뭔가를 설치하는 과정이 주욱 나오고

 

Happy hacking! Done in ...s

 

라면서 유쾌하게(..) 프로젝트가 생성됩니다.

 

그다음
cd react-test
yarn start

(npm의 경우 npm start)

 

그러면 터미널에 결과가 출력되고, 브라우저에 자동으로 리액트 페이지가 띄워질 거에요.

 

자, 이제 리액트 프로젝트가 생성되고 서버 구동을 마쳤습니다!

그 이후는 다음 포스팅에서 다루도록 할게요~