1. 리액트 입문

1. 리액트는 어쩌다 만들어졌을까?

(1) 배경

- JavaScript를 사용하여 HTML을 제어할 때에는 특정 DOM을 선택 -> 이벤트 발생하면 변화 주도록 설정

- 사용자와의 인터랙션이 자주 발생해 DOM을 직접 건드리면서 작업한다면 코드가 난잡해짐

- 그래서 Ember, Backbone, AngularJS 프레임워크가 만들어져 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이

바뀌도록 연결해주어 업데이트하는 작업을 간소화해줌

 

(2) 리액트의 Virtual DOM

- 리액트는 Virtual DOM을 사용해서 이를 가능하게 함 

- Virtual DOM은 가상의 DOM으로 메모리에 가상으로 존재하는 JavaScript 객체이기 때문에 속도가 훨씬 빠름

- 리액트는 상태가 업데이트되면 필요한 곳의 UI를 Virtual DOM을 통해 렌더링하고

실제 브라우저에 보여지고 있는 DOM과 비교한 후, 차이가 있는 곳을 실제 DOM에 패치

- 장점 : 빠른 성능과 어떻게 업데이트를 할 지 고민하지 않아도 OK

 

2. 작업환경

Node.js : *Webpack과 *Babel 도구들이 Node.js 기반으로 만들어짐

Yarn : 개선된 버전의 npm이라고 생각, 더 나은 속도와 더 나은 *캐싱 시스템을 사용하기 위함

코드 에디터, Git bash

 

*Webpack : 여러가지 파일(컴포넌트)을 한개로 결합하기 위해서 사용

*Babel : JSX를 비롯한 새로운 자바스크립트 문법을 사용하기 위해서 사용

*캐시 시스템 : 캐싱 시스템이라고도 하는 캐싱은 데이터를 저장하는 데 사용되는 기술로 향후 요청을 더 빠르게 처리할 수 있습니다. 캐싱은 이전에 이미 생성된 경우 서버에서 생성하거나 전송할 필요가 없기 때문에 시간과 대역폭을 절약합니다.

 

새 프로젝트 생성

npx create-react-app begin-react(디렉토리명)

cd begin-react
yarn start