React 컨텍스트의 비밀 풀기: 힘, 함정, 성능

React Context는 소품 드릴링의 혼란 없이 구성 요소 간에 공유 데이터를 제공하는 마법의 파이프라인과 같은 환상적인 도구입니다. 하지만 이러한 편리함에는 문제가 따릅니다. 확인하지 않은 사용은 앱을 손상시키는 성능 병목 현상을 초래할 수 있습니다.

이 블로그에서는 일반적인 함정을 피하면서 React Context를 마스터하는 방법을 살펴보겠습니다. 결국 당신은 최적화된 고성능 앱을 갖춘 Context 전문가가 될 것입니다.

---

1. React 컨텍스트란 무엇이며 왜 관심을 가져야 합니까?

React Context는 앱의 구성 요소를 함께 엮는 보이지 않는 스레드입니다. 구성 요소 트리의 모든 수준에서 소품을 전달하지 않고도 데이터 공유가 가능합니다.

다음은 간단한 예입니다.

const ThemeContext = React.createContext('light'); // Default: light theme

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>




<hr>

<h2>
  
  
  <strong>2. The Hidden Dangers of React Context</strong>
</h2>

<h3>
  
  
  <strong>Context Change = Full Re-render</strong>
</h3>

<p>Whenever a context value updates, all consumers re-render. Even if the specific value a consumer uses hasn’t changed, React doesn’t know, and it re-renders anyway.</p>

<p>For example, in a responsive app using AdaptivityContext:<br>
</p>

<pre class="brush:php;toolbar:false">const AdaptivityContext = React.createContext({ width: 0, isMobile: false });

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <AdaptivityContext.Provider value={{ width, isMobile }}>
      <Header />
      <Footer />
    </AdaptivityContext.Provider>
  );
}

여기서 AdaptivityContext의 모든 소비자는 isMobile에만 관심이 있더라도 너비 변경에 따라 다시 렌더링됩니다.

---

3. 모범 사례로 컨텍스트 강화

규칙 1: 더 작은 컨텍스트를 만드세요

불필요한 재렌더링을 방지하기 위해 컨텍스트를 논리 단위로 나누세요.

const SizeContext = React.createContext(0);
const MobileContext = React.createContext(false);

function App() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const isMobile = width <= 680;

  return (
    <SizeContext.Provider value={width}>
      <MobileContext.Provider value={isMobile}>
        <Header />
        <Footer />
      </MobileContext.Provider>
    </SizeContext.Provider>
  );
}

규칙 2: 컨텍스트 값 안정화

useMemo를 사용하여 렌더링할 때마다 컨텍스트 값에 대한 새 개체를 생성하지 마세요.

const memoizedValue = React.useMemo(() => ({ isMobile }), [isMobile]);

<MobileContext.Provider value={memoizedValue}>
  <Header />
</MobileContext.Provider>;

규칙 3: 더 작은 컨텍스트 소비자를 사용하세요

컨텍스트 종속 코드를 더 작고 격리된 구성 요소로 이동하여 재렌더링을 제한하세요.

function ModalClose() {
  const isMobile = React.useContext(MobileContext);
  return !isMobile ? <button>Close</button> : null;
}

function Modal() {
  return (
    <div>
      <h1>Modal Content</h1>
      <ModalClose />
    </div>
  );
}

---

4. 상황이 충분하지 않을 때: 한계를 아십시오

테마, 로케일, 사용자 인증과 같은 전역적이고 가벼운 데이터에서는 컨텍스트가 빛을 발합니다. 복잡한 상태 관리의 경우 Redux, Zustand 또는 Jotai와 같은 라이브러리를 고려해보세요.

---

5. 치트시트: React 컨텍스트를 한 눈에 살펴보기

Concept	Description	Example
Create Context	Creates a context with a default value.	const ThemeContext = React.createContext('light');
Provider	Makes context available to child components.	...
useContext Hook	Accesses the current context value.	const theme = React.useContext(ThemeContext);
Split Contexts	Separate context values with different update patterns.	const SizeContext = React.createContext(); const MobileContext = React.createContext();
Stabilize Values	Use useMemo to stabilize context objects.	const memoValue = useMemo(() => ({ key }), [key]);
Avoid Full Re-renders	Isolate context usage in smaller components or use libraries like use-context-selector.	{({ isMobile }) => ...}
When Not to Use Context	Avoid for complex state; use dedicated state management libraries.	Use Redux or Zustand for large-scale state management.

콘셉트

---

설명

예 컨텍스트 만들기

기본값으로 컨텍스트를 생성합니다. const ThemeContext = React.createContext('light'); 공급자

---

하위 구성요소에 컨텍스트를 제공합니다. ...

useContext 후크

현재 컨텍스트 값에 액세스합니다. const 테마 = React.useContext(ThemeContext); 컨텍스트 분할 업데이트 패턴이 다른 별도의 컨텍스트 값. const SizeContext = React.createContext(); const MobileContext = React.createContext();

값 안정화

useMemo를 사용하여 컨텍스트 객체를 안정화하세요. const memoValue = useMemo(() => ({ 키 }), [키]); 전체 재렌더링 방지

더 작은 구성 요소에서 컨텍스트 사용을 격리하거나 use-context-selector와 같은 라이브러리를 사용하세요. {({ isMobile }) => ...} 컨텍스트를 사용하지 말아야 할 경우

복잡한 상태에는 피하세요. 전용 상태 관리 라이브러리를 사용하세요. 대규모 상태 관리에는 Redux 또는 Zustand를 사용하세요.

6. React 컨텍스트의 미래

---

React 팀은 구성 요소가 특정 컨텍스트 값만 구독할 수 있도록 하는 기능인 컨텍스트 선택기에 대해 적극적으로 작업하고 있습니다. 그때까지는 use-context-selector 및 React-tracked와 같은 도구가 탁월한 옵션입니다. 7. 주요 시사점 React Context는 강력하지만 만능은 아닙니다. 컨텍스트를 잘못 관리하면 심각한 성능 저하가 발생할 수 있습니다. 컨텍스트 분할, 가치 안정화, 소비자 최적화 등의 모범 사례를 따르면 잠재력을 최대한 발휘할 수 있습니다. 오늘부터 이러한 기술을 구현하여 React 앱을 한 단계 더 발전시키세요! ?

위 내용은 React 컨텍스트의 비밀 풀기: 힘, 함정, 성능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!