2026-03-14

렌더링/리렌더링

렌더링이란?

React가 컴포넌트 함수를 다시 실행해 새로운 UI를 계산하는 과정

렌더링 = DOM에 바로 그리는 게 아니라 UI를 계산하는 단계

리렌더링 발생 조건

state 변경
```
setCount(count + 1);
```
⇒ 가장 기본적인 트리거
props 변경 부모가 리렌더링되면 자식도 기본적으로 리렌더링됨
부모 컴포넌트 리렌더링 props가 안 바뀌어도 부모가 리렌더되면 자식도 실행됨
context 값 변경 Context Provider 값 변경 시 구독 중인 모든 컴포넌트 리렌더
전역 상태 변경 (Redux, Zustand 등) 해당 상태를 구독 중이면 리렌더

불필요한 리렌더링이란?

UI가 실제로 바뀌지 않았는데도 컴포넌트가 다시 실행되는 것

props가 같음
화면 변경 없음
하지만 부모 때문에 재실행

불필요한 리렌더링 막는 방법

React.memo
- 컴포넌트를 메모이제이션
- 컴포넌트의 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 함
- props가 동일하면 부모가 리렌더링 돼도 자식 리렌더링 ㅏ안됨
- 특히 부모 컴포넌트가 자주 업데이트되는 상황에서 유용
```
export default React.memo(Component);
```
  ⇒ props가 같으면 리렌더링 방지
useMemo
- 계산 비용이 많이 드는 연산 결과를 메모제이션
```
const value = useMemo(() => expensiveCalc(), [deps]);
```
  ⇒ 값 재계산 방지
useCallback
- 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션
```
const handleClick = useCallback(() => {}, []);
```
  ⇒ 함수 재생성 방지
상태 분리
- 하나의 큰 state X
- 필요한 컴포넌트에만 state 배치 O
key 올바르게 사용 리스트 렌더링 시 key 중요
전역 상태 최소화 불필요한 전역 상태 사용은 리렌더 증가
React DevTools의 Profiler를 활용
- 불필요한 리렌더링이 발생하는 컴포넌트를 식별하고 최적화

렌더링 최적화란?

불필요한 리렌더링을 줄이고, 연산 비용을 최소화하는 것

✔ 리렌더링 줄이기

✔ 무거운 연산 줄이기

✔ 번들 크기 줄이기

렌더링 최적화

리렌더링 막는 방법을 포함한 다른 방법들 존재

코드 스플리팅
Lazy Loading
이미지 최적화
Virtual DOM 활용
Debounce/Throttle

등도 포함 ⇒ 불필요한 리렌더링 방지는 렌더링 최적화의 한 부분

참고자료

https://cdragon.tistory.com/entry/Front-End-React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D-React-%ED%83%84%EC%83%9D-%EB%B0%B0%EA%B2%BD
https://judahhh.tistory.com/99
https://sunho-doing.tistory.com/entry/Reactjs-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94-useMemo-Reactmemo

results matching ""

No results matching ""