React Context API 사용 가이드

1. Context 기본 구조

javascript

클릭하여 코드 펼치기

// contexts/NavContext.jsx
import { createContext, useState } from 'react';

export const NavContext = createContext();

export const NavProvider = ({ children }) => {
    const [isNavExpanded, setIsNavExpanded] = useState(false);

    return (
        <NavContext.Provider value={{ isNavExpanded, setIsNavExpanded }}>
            {children}
        </NavContext.Provider>
    );
};
클릭하여 코드 복사

2. Context Provider 설정

javascript

클릭하여 코드 펼치기

import { NavProvider } from './contexts/NavContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <NavProvider>
      <App />
    </NavProvider>
  </React.StrictMode>,
);
클릭하여 코드 복사

3. Context 사용
하위 컴포넌트에서 Context 사용하기

javascript

클릭하여 코드 펼치기

import { useContext } from 'react';
import { NavContext } from './contexts/NavContext';

function Component() {
    const { isNavExpanded, setIsNavExpanded } = useContext(NavContext);

    return (
        <div className={isNavExpanded ? 'expanded' : 'collapsed'}>
            {/* 컴포넌트 내용 */}
        </div>
    );
}
클릭하여 코드 복사

4. 주요 규칙과 패턴

 

• Provider 규칙
  • Provider는 최상위에 한 번만 배치
  • 중복 사용 피하기
  • 여러 Context 사용 시 중첩 가능
• Context 사용 규칙
  • useContext는 반드시 컴포넌트 내부에서 사용
  • 필요한 모든 컴포넌트에서 import와 useContext 선언 필요

5. 올바른 예시

javascript

클릭하여 코드 펼치기

// 여러 Context 중첩 사용
ReactDOM.createRoot(document.getElementById('root')).render(
  <NavProvider>
    <ThemeProvider>
      <UserProvider>
        <App />
      </UserProvider>
    </ThemeProvider>
  </NavProvider>
);

// Context 사용 컴포넌트
function MyComponent() {
    const { isNavExpanded } = useContext(NavContext);
    const { theme } = useContext(ThemeContext);
    const { user } = useContext(UserContext);
    // ...
}
클릭하여 코드 복사

 

6. 주의사항

 

1. Provider 위치
   1. Context를 사용하는 컴포넌트는 반드시 Provider 하위에 있어야 함
   2. Provider 없이 Context 사용 시 undefined 에러 발생
2.  성능 고려사항
   1. Context 값이 변경되면 하위 모든 컴포넌트가 리렌더링될 수 있음
   2. 필요한 경우에만 Context 사용 권장
3.  초기값 설정

javascript

클릭하여 코드 펼치기

// 안전한 Context 사용을 위한 초기값 설정
export const NavContext = createContext({
    isNavExpanded: false,
    setIsNavExpanded: () => {}
});
클릭하여 코드 복사

7. 디버깅 팁

• React DevTools를 사용하여 Context 값 변화 추적
• Console.log로 Context 값 확인
• Provider가 올바른 위치에 있는지 확인