React.js 기초 다지기

목차

1. 리액트란?

2. JSX란?

3. 컴포넌트란?

4. props와 state

5. state와 stateless

6. style 적용하기

7. life cycle

##1. 리액트란?

리액트의 DOM

• 기존 자바스크립트의 경우, 성능상 문제가 있을 가능성이 있다고 한다.

  • 왜냐면 대부분의 JS 프레임워크의 경우 DOM을 필요 이상으로 많이 업데이트 하기 때문!
  • 최근의 웹 문서의 경우 굉장히 많은 DOM 컴포넌트들로 이루어져 있기 때문에 이게 부담스러울 수 있다.

• 그래서 등장한 것이 리액트의 Virtual DOM!

  • 얘는 기존 DOM의 어떻게 보면 copy 본인데, 실제 DOM 오브젝트와 같은 프로퍼티들을 가지고 있지만 실제로 화면에 나타나지는 않는다.

  • 실제 DOM을 다루는 건 느리지만 가상 DOM을 다루는 건 빠르다.

DOM의 작동 순서

1. 가상 DOM이 업데이트 되고 난 후, 리액트는 가상 DOM과 가상 DOM의 스냅샷을 비교해 어떤 차이가 있는지를 알아내고,
2. “diffing” 과정을 통해 이전 버전과 현재 버전의 DOM의 변화를 알아낸 뒤,
3. 이 과정이 끝나면 바뀐 오브젝트들만 업데이트한다.
4. 바뀐 오브젝트들만 실제 DOM에 반영된다.

5. 화면의 보여지는 실제 DOM의 내용을 업데이트한다.

   따라서 같은 내용을 같은 엘리먼트에 두 번 렌더링하면 아무 일도 발생하지 않는다.