[React] useContext

useContext에 대해 알아보기 전에, 우선 React에서 Context란 무엇인지부터 이해할 필요가 있다. useContext는 Context를 더 쉽게 사용하기 위한 Hook이기 때문이다.

🔎 Context란?

React에서 Context는 컴포넌트 트리 전체에 데이터를 제공할 수 있는 방법이다. 일반적인 React 애플리케이션에서는 데이터가 props를 통해 부모에서 자식으로 전달되지만, Context를 사용하면 명시적으로 props를 각 레벨마다 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 공유할 수 있다.

Context가 필요한 이유

React에서는 일반적으로 데이터를 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달한다. 하지만 컴포넌트 트리가 깊어지면 여러 단계를 거쳐 데이터를 전달해야 하는 Props Drilling 문제가 발생한다. Context는 이러한 문제를 해결해 중간 컴포넌트들에게 props를 전달하지 않고도 데이터를 공유할 수 있게 해준다. 특히 테마, 로그인 상태, 언어 설정과 같은 전역적 데이터를 관리할 때 매우 유용하다.

💡 Context API

Context API는 React에서 Context를 사용하기 위한 도구들의 집합이다. createContext, Provider, Consumer 세 가지 주요 개념으로 구성된다.

1. createContext

Context 객체를 생성한다. 기본값을 선택적으로 지정할 수 있다.

const ThemeContext = React.createContext('light');

2. Provider

Context의 값을 하위 컴포넌트에 제공한다. Provider는 value prop을 통해 값을 전달할 수 있다.

<ThemeContext.Provider value={theme}>
  {/* 하위 컴포넌트들 */}
</ThemeContext.Provider>

3. Consumer

Context의 값을 소비(사용) 하는 컴포넌트이다. useContext가 도입되기 전에는 주로 이 방식을 사용했다.

<ThemeContext.Consumer>
  {theme => (
	<button style={{ background: theme === 'dark' ? 'black' : 'white' }}>
      {theme} 모드  
    </button>
  )}
</ThemeContext.Consumer>

💡 useContext Hook

useContext는 Context API의 일부로, Context의 값을 사용하기 위한 React Hook이다. 함수형 컴포넌트에서 Context 값에 접근할 때 Consumer보다 더 간결하고 직관적인 방법을 제공한다.

const theme = useContext(ThemeContext);

이 훅은 Context 객체를 인자로 받아 현재 Context 값을 반환한다. Context의 값이 변경되면 useContext를 사용하는 컴포넌트는 자동으로 리렌더링 된다.

📚 useContext 활용 예시

// Context 생성하기
const ThemeContext = React.createContext('light');

// Provider로 하위 컴포넌트에 데이터 제공하기
function App() {
	const [theme, setTheme] = useState('light');
  
 	return (
    	<ThemeContext.Provider value={{ theme, setTheme }}>
      		<MainContent />
      	</ThemeContext.Provider>
    );
}

// useContext로 데이터 사용하기
function ThemedButton() {
	const { theme, setTheme } = useContext(ThemeContext);
  
  	return (
    	<button
      		style={{ background: theme === 'dark' ? 'black' : 'white' }}
		onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        	테마 변경
      	</button>
    );
}

⚠️ useContext 사용시 주의사항

1. 렌더링 최적화

Context 값이 변경되면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링 된다. 따라서 자주 변경되는 값과 그렇지 않은 값을 분리하는 것이 좋다.

// 분리된 Context 사용
const ThemeContext = createContext('light');
const UserContext = createContext(null);

// App에서
<ThemeContext.Provider value={theme}>
	<UserContext.Provider value={user}>
    	<MainContent />
    </UserContext.Provider>
</ThemeContext.Provider>

2. 적절한 사용

props 전달이 간단하면 Context보다 props를 사용하는 것이 더 명확할 수 있다.
☝🏻 전역 상태 관리 (테마, 언어, 인증 등)
✌🏻 깊은 컴포넌트 트리에서 데이터 공유
🤟🏻 여러 컴포넌트에서 동일한 데이터에 접근해야 할 때

3. 메모이제이션

Context 값이 객체인 경우, 불필요한 리렌더링을 방지하기 위해 메모이제이션을 사용하는 것이 좋다.

function App() {
	const [theme, setTheme] = useState('light');
  	const [user, setUser] = useState(null);
  
  	// 메모이제이션된 Context 값
  	const tehmeContextValue = useMemo(() => {
    	return { theme, setTheme };
    }, [theme]);
  
  	return (
    	<ThemeContext.Provider value={themeContextValue}>
      		<MaineContent />
      	</ThemeContext.Provider>
    );
}

useContext Hook은 React의 Context API를 더 쉽게 사용할 수 있게 해주는 도구이다. Props Drilling 문제를 해결하고, 컴포넌트 트리 전체에 데이터를 효율적으로 공유할 수 있게 해준다. 적절히 사용하면 코드의 가독성과 유지 보수성을 크게 향상시킬 수 있다.

하지만 단순한 props 전달로 해결할 수 있는 경우나, 리렌더링 최적화가 중요한 경우네는 Context 사용을 신중하게 고려해야 한다. 대규모 상태 관리가 필요한 경우에는 Redux나 Zustand 같은 상태 관리 라이브러리와 함께 사용하는 것도 좋은 방법이다.