🎈 왜 리액트인가?

어떤 데이터가 변할 때마다
어떤 변화를 줄지 고민하는 것이 아니라
그냥 기존의 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식

그런데 이런 방식이 가능 할까? DOM은 느린데..

리액트 이해

• 컴포넌트: 리액트에서 특정 부분이 어떻게 생길지 정하는 선언체
• 리액트의 성능 향상: '초기 렌더링'과 '리렌더링'

1. 초기 렌더링

• Render 함수는 그 내부에 있는 컴포넌드들을 재귀적으로 Rendering
• 최상위 컴포넌트의 렌더링 작업이 끝나면 HTML 마크업(문자열)을 만들고 DOM에 주입

2. 조화 과정

• 업데이트 과정이 아닌 "조화(reconcilation) 과정"
• 뷰가 변형되는 것이 아니라 새로운 요소로 갈아 끼우는 과정
• 컴포넌트는 데이터를 업테이드 했을 때 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render 함수를 다시 호출
• 그렇게 만든 결과를 곧 바로 DOM에 반영하지 않고, 이전에 만든 결과와 비교하여 둘의 차이를 가지고 변경이 필요한 요소만 DOM 트리를 업데이트

🎐 리액트 특징

Virtual DOM

1. DOM이란?

• DOM = Document Object Model (XML or HTML)
• 동적 UI에 최적화되어 있지 않다.
• DOM 자체는 빠르다
• JS가 객체를 처리하는 성능과 거의 똑같다.
• 다만 DOM에 변화가 일어나면 브라우저는 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는 과정에서 시간이 허비되는 것.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행함

2. Virtual DOM

• 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다,
• 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
• 바뀐 부분만 실제 DOM에 적용한다.

🧶 작업 환경설정

1. Nodejs와 Yarn 설치하기
2. 기본 세팅하기: 아래 둘 중 하나 선택
   • yarn create react-app "프로젝트 이름"
   • npm init react-app "프로젝트 이름"