1. 리액트 시작

1. 왜 리액트 인가?

 

javascript 로 비동기 처리를 할라면 업데이트 하는 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 작업은 간단 하지만 그 규모가 크면 상담히 복잡 해지고 관리가 제대로 되지 않으면 성능 저하가 올수 있다.

그래서 페이스북 개발팀에서 해결할라고 나온데 리액트 이다.

리액트는 변경할때마다 어떤 변화를 줄지 고민 하는것이 아니라 기존 뷰를 날려 버리고 처음부터 렌더링 하는 방식이다.

이렇게 바뀌면서 구조도 심플해지고 작성 해야할 코드양이 많이 줄이 든다. 

 

2. 리액트의 이해 

 

리액트는 자바 스크립트 라이브러로 사용자 인터페이스를 만드는 사용 한다. mvc,mvw 등 프레임워크와 달리 오직 V(View)만 신경 쓰는 라이브러리 입니다. 

특정 부분이 어떻게 생길지 정하는 선언체(컴포넌트)를 통해 초기 렌러링과 리 렌더링을 한다. 

리액트는  Virtual DOM을 사용 해서 기존 DOM 과 새로운 DOM을 비교 해서 변경이 된 DOM 적용 하게 된다.

절차는 아래와 같다.

 

1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더 합니다.

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

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

 

이렇게 전체 DOM을 바꾸는게 아니고 변경이 필요한 부분만 교체 하기 떄문에 CPU 과부화를 줄일수 있고 전체 를 변경 할떄 끊김현상을 해결할수 있게 됩니다.

 

3. 환경 설정

 

1. node 와  npm 을 설치

node 다운 로드 경로(LTS버전은 설치)  :  https://nodejs.org/ko/download/

설치후 터미널 창에서 npm --version, node --version 실행후 버전이 나오는지 확인 한다.

C:\work\saramin\react>node --version
v10.16.0

C:\work\saramin\react\hello-react>npm --version
6.9.0

 

node 를 설치 후 아래와 같이 npm 을 설치 해준다

npm install -g create-react-app //npm -g 글로벌로 npm 설치 해준다
create-react-app my-app 

cd my-app  
npm start 

또는 npx 를 사용 할수 있다. npx를 사용 하는걸 추천한다. 그 이유는 npx는 최신 버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후에 해당 패키지를 제거 해주기 떄문이다.

npx create-react-app my-app

cd my-app
npm start

npm start 를 하면 서버가 실행 되고 http://localhost:3000/와 같은 url 생성 될것이다. url 치고 들어가면 아래 같은 React 기본 페이지가 나왔다면 성공!!!