[코드잇 풀스택 1기] - React 렌더링 방식

React 렌더링 방식

리액트는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 DOM결과를 브라우저에 제공하는 과정

 

● 가상 DOM (Vitual DOM)

리액트의 특징 중 하나는 가상 DOM 입니다.

 

- 렌더링 과정

1. 컴포넌트의 상태, 속성이 변경되면 리액트는 가상 DOM을 업데이트 합니다.

2. 가상 DOM 업데이트 내용과 이전 D가상 DOM을 비교합니다.

3. 변경 된 DOM을 실제 DOM에 적용 하여 성능을 최적화 시킵니다.

 

 

●재조정 (Reconciliation)

가상 DOM과 실제DOM의 차이를 비교하여 변경사항을 실제 DOM에 반영하는 과정을 재조정이라고 합니다.

이 과정을 통해서 불필요한 DOM 조작을 최소화, 앱 성능을 향상 시켜줍니다.

 

 

● 일방향 데이터 흐름

리액트는 데이터가 한 방향으로 흐르도록 설계가 되어있습니다.

부조 컴포넌트에서 자식 컴포넌트로 데이터를 전달 하는방식으로, 데이터의 흐름을 예측하고 쉽게 디버깅 할 수 있게 됩니다.

 

●훅

새롭게 추가된 훅(Hook)은 함수형 컴포넌트에서도 상태 관리가 라이프사이클 메서드를 사용할 수 있게 해줍니다

`useState`, `useEffect`, `useContext` 등이 있습니다.

 

● 서버 사이드 렌더링

리액트는 서버 사이드 랜더링을 지원하여, 서버에서 초기 랜더링을 수행하고 클라이언트에서 하이드레이션을 통해 이벤트 핸들러를 연결합니다.

 

 

import React, { useState } from 'react'; // React 가지고 오기

function App() {
  const [count, setCount] = useState(0); // 초기값 0으로 사용

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> // setCount를 통해서 상태를 업데이트 합니다.
        Click me
      </button>
    </div>
  );
}

export default App;

 

예제처럼 useState훅을 사용하여 count를 관리하고 버튼 클릭시 setcount를 호출하여 상태를 업데이트 합니다.