React 18 useDeferredValue 심화: 검색 자동완성에서 디바운싱을 제거하는 이유

🎯 도입부: Context API, 과연 만능 치트키일까?

React Context API는 컴포넌트 트리를 따라 데이터를 쉽게 전달할 수 있게 해주는 강력한 도구로, 'Prop Drilling' 문제를 해결하는 데 큰 도움이 됩니다.
하지만 Context를 무심코 사용하다 보면, 앱의 규모가 커질수록 성능 저하라는 예상치 못한 함정에 빠지게 됩니다.
Context의 값이 조금만 바뀌어도 해당 Context를 구독(Subscribe)하는 모든 하위 컴포넌트가 무차별적으로 리렌더링 되는 현상 때문입니다.
이번 심화 학습에서는 Context API 사용 시 발생하는 불필요한 리렌더링(Rendering Waste)의 근본적인 원인을 파헤치고, 이를 방지하여 애플리케이션의 성능을 극대화하는 실질적인 최적화 전략을 소개합니다.

💡 핵심 문제: Context Provider의 '값(value)'이 변경될 때마다, useContext를 사용하는 모든 컴포넌트가 리렌더링됩니다. 이는 값의 일부만 사용하더라도 발생합니다.

---

🔍 Context의 얕은 비교와 리렌더링 전파

1. Context Provider의 값 비교 원리

Context Provider의 `value` prop은 기본적으로 얕은 비교(Shallow Comparison)를 수행합니다.
이전 렌더링 시점의 `value` 객체와 현재 렌더링 시점의 `value` 객체를 비교하여 메모리 주소가 다를 경우, React는 값이 변경되었다고 판단하고 Context를 구독하는 모든 컴포넌트를 리렌더링합니다.

2. 리렌더링 낭비의 주요 원인

Context의 `value`에 Object나 Array를 전달할 때, 해당 객체들은 매 렌더링마다 새로운 참조를 가지게 됩니다.
다음 표는 흔히 발생하는 리렌더링 낭비의 원인입니다.

항목	설명	문제점
인라인 객체/함수	value={{ state, action: () => {} }}와 같이 Provider에 직접 정의된 객체나 함수.	매 렌더링마다 참조 주소가 변경되어 얕은 비교 실패.
단일 대형 Context	사용자 정보, 테마, 설정 등 다양한 데이터를 하나의 Context로 관리.	특정 컴포넌트가 일부 데이터만 사용해도, 전체 데이터 변경 시 리렌더링됨.

⚠️ 주의: useContext로 Context를 가져온 컴포넌트는 React의 memo를 사용하더라도 Context 값이 변경되면 무조건 리렌더링됩니다. Context의 값이 변경되면 memo의 Props 비교 로직을 우회하고 리렌더링이 발생합니다.

---

💡 심화 최적화 전략 3가지

Context API의 리렌더링 문제를 해결하기 위한 세 가지 핵심 전략은 '참조 무결성 유지', 'Context 분리', '선택적 구독'입니다.

1. 🎯 값 메모이제이션: useMemo와 useCallback 활용

Provider의 `value`가 객체나 함수일 경우, 매 렌더링마다 새로운 참조가 생성되지 않도록 useMemo와 useCallback을 사용하여 메모이제이션해야 합니다.

✅ `value` 객체 메모이제이션 (useMemo)
const memoizedValue = useMemo(() => ({ stateData, actions }), [stateData, actions]);
// value가 stateData 또는 actions가 변경될 때만 새로운 참조를 가짐.

✅ 핸들러 함수 메모이제이션 (useCallback)
const handleAction = useCallback(() => { /* 로직 */ }, [dependency]);
// actions 객체 내의 함수들이 불필요하게 재생성되는 것을 방지하여 useMemo의 의존성(dependency) 변경을 막음.

2. 🧩 Context 분리: State와 Dispatch 분할

대규모 Context를 사용하는 대신, 자주 변하는 상태(State)와 변경되지 않는 액션(Dispatch/Setter 함수)을 별도의 Context로 분리하는 것이 가장 효과적인 최적화 기법 중 하나입니다.
액션 Context는 한 번 정의되면 변하지 않으므로, 이를 구독(Subscribe)하는 컴포넌트는 상태가 변경되어도 리렌더링 되지 않습니다.

📝 분리 패턴의 효과

• ✔️ 상태 Context 구독 컴포넌트: 상태(State)가 변경될 때만 리렌더링됨.
• ✔️ 액션 Context 구독 컴포넌트: 액션 함수는 불변하므로, 상태 변경 시 리렌더링 되지 않음.

3. 🎁 선택적 구독을 위한 Custom Hook

Context를 사용하는 컴포넌트가 Context의 일부 값(user.name)만 필요로 할 때, Context 전체(user 객체)가 변경되면 리렌더링되는 문제를 해결합니다.
이를 위해 Custom Hook을 만들어 특정 필드만 추출하고, 해당 필드가 변경되었을 때만 강제로 업데이트하도록 로직을 구현할 수 있습니다. (예: Redux의 useSelector와 유사)

📌 Custom Hook 구조 예시
function useCustomState() {
  const context = useContext(MyContext);
  const specificValue = context.valueA;
  return specificValue;
}

이 패턴은 Context의 값 비교를 직접 수행하는 로직(예: useSyncExternalStore 또는 라이브러리)을 Custom Hook에 숨겨, 실제로 필요한 데이터가 변경될 때만 컴포넌트를 업데이트하도록 합니다.

---

✅ Context 최적화는 곧 참조 무결성 관리

React Context API는 편리하지만, 성능 측면에서는 항상 경계해야 할 부분이 있습니다.
결국 Context API 최적화의 핵심은 Provider의 `value`에 전달되는 객체 또는 함수의 참조 무결성을 유지하여, React의 얕은 비교가 불필요하게 실패하지 않도록 관리하는 것입니다.

💡 3줄 요약 및 최종 점검 리스트

1. 1. 메모이제이션: Provider의 `value`와 내부 함수는 반드시 `useMemo`와 `useCallback`으로 감싸서 참조 변경을 막으십시오.
2. 2. 분리 전략: 자주 변하는 데이터와 변하지 않는 액션(함수)을 두 개의 Context로 분리하여 구독 범위를 최소화하십시오.
3. 3. 대안 검토: Context의 리렌더링 문제가 해결되지 않는다면, Zustand, Jotai 등 리렌더링 관리가 더 용이한 상태 관리 라이브러리를 도입하는 것을 고려하십시오.

이 심화 전략들을 적용하여 불필요한 렌더링을 줄인다면, 애플리케이션의 사용자 경험(UX)과 개발 효율성이 크게 향상될 것입니다. 꾸준한 프로파일링을 통해 렌더링 낭비를 확인하는 습관을 들이세요.