[리액트] 렌더링되는 과정과 예시

✅ 리액트의 렌더링이란?

 리액트는 UI를 컴포넌트 단위로 구성하고, 컴포넌트는 상태(state)나 props가 바뀔 때마다 다시 렌더링된다.
이 렌더링 과정은 브라우저의 DOM 조작을 최소화하고 최적화된 방식으로 수행된다.

 

✅ 초기 렌더링 과정

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

[ 과정 요약 ]

1. 컴포넌트 함수가 호출됨 → `MyComponent()` 실행

2. useState 훅이 초기값을 등록하고 상태 관리 시작
3. JSX 반환 → 리액트가 가상 DOM(Virtual DOM) 생성
4. 리액트는 실제 DOM과 비교 → 필요한 부분만 실제 DOM 업데이트
5. 브라우저가 변경된 부분을 화면에 그림

 

[ 관련 훅 ]

- `useState`: 컴포넌트의 상태를 생성하고, 상태가 바뀌면 컴포넌트를 다시 렌더링함
- `useEffect`: 렌더링 직후나 상태/props가 바뀐 후에 내부 로직를 처리함

 

✅ 리렌더링 (업데이트) 과정

- 컴포넌트의 상태(state)나 props가 바뀌면 리렌더링이 발생합니다.

 

[ 예시: `setCount(count + 1)` 호출 ]

1. 상태 변경 요청: `setCount`로 상태 변경 요청
2. 리액트가 변경 감지 → 컴포넌트 리렌더링 예정
3. 다시 `MyComponent()` 함수 실행 → 최신 상태로 JSX 생성
4. 이전 가상 DOM과 새 가상 DOM 비교 → 필요한 변경만 실제 DOM에 반영
5. 변경된 UI만 다시 그림

[ 리렌더링의 기준 ]

 리액트는 아래의 경우 컴포넌트를 리렌더링합니다:

트리거	설명
useState의 상태가 변경됨	새로운 값이 이전 값과 다르면 렌더링
부모 컴포넌트에서 전달된 props가 변경됨	해당 컴포넌트도 리렌더링
useReducer로 상태 변경됨	상태 업데이트 → 컴포넌트 리렌더링
context 값 변경됨	useContext 사용하는 컴포넌트 리렌더링
forceUpdate() 호출	강제로 렌더링

[ 훅과 렌더링 관계 요약 ]

훅(Hook) 렌더링에 어떤 영향?

useState	상태 변경 시 리렌더링 발생
useEffect	렌더링 후 실행됨 (DOM 업데이트 이후), 의존성 배열 중요
useMemo	연산 결과를 메모이제이션하여 불필요한 계산 방지
useCallback	함수를 메모이제이션하여 자식 컴포넌트의 리렌더링 방지
useRef	렌더링에 영향을 주지 않는 변수 저장소 역할
useContext	context 값이 변경되면 사용 중인 컴포넌트 리렌더링

 

[ 리렌더링 최적화 팁 ]

- 불필요한 렌더링 방지:

React.memo로 컴포넌트를 메모이제이션

useMemo, useCallback으로 값/함수 재사용

key속성 주의: 리스트 렌더링에서 key가 변하면 컴포넌트를 다시 생성하게 됨

 

🔚 정리

1. 리액트는 상태나 props가 변경되면 컴포넌트를 다시 렌더링합니다.
2. 리렌더링 시, 컴포넌트 함수 전체가 다시 실행됩니다.
3. `useState`, `useReducer`, `useContext` 등이 리렌더링을 유발합니다.
4. `useEffect`는 렌더링 이후에 실행되며, `useRef`는 렌더링과 무관하게 데이터를 저장합니다.
5. 렌더링 최적화를 위해 `React.memo`, `useMemo`, `useCallback` 등을 사용할 수 있습니다.