컨텍스트 API로 상태 관리하기
리액트 애플리케이션을 개발할 때 컴포넌트 간의 상태 관리는 매우 중요합니다. 리덕스(Redux)와 같은 상태 관리 라이브러리를 사용할 수 있지만, 때로는 내장된 기능인 컨텍스트 API(Context API)를 사용하는 것이 더 간단하고 효율적일 수 있습니다. 이 포스팅에서는 리액트의 Context API를 사용하여 상태를 관리하는 방법을 자세히 설명하겠습니다.
컨텍스트 API의 중요성
컨텍스트 API는 컴포넌트 트리 전체에 데이터를 전역적으로 제공할 수 있는 방법을 제공합니다. 이를 통해 중첩된 컴포넌트에 props를 일일이 전달하지 않고도 상태를 공유할 수 있습니다. 특히, 글로벌 상태 관리가 필요한 경우에 매우 유용합니다.
컨텍스트 API 기본 개념
컨텍스트 API는 React.createContext
를 사용하여 컨텍스트 객체를 생성하는 것으로 시작합니다. 컨텍스트 객체는 두 가지 주요 컴포넌트를 제공합니다: Provider
와 Consumer
.
- Provider: 하위 컴포넌트에 컨텍스트 값을 제공하는 역할을 합니다.
- Consumer: 상위 컴포넌트에서 제공한 컨텍스트 값을 사용하는 역할을 합니다.
컨텍스트 API 설정 및 사용
컨텍스트 API를 사용하여 간단한 테마 토글 애플리케이션을 만들어 보겠습니다.
1. 컨텍스트 생성
먼저, 컨텍스트를 생성합니다.
import React, { createContext, useState } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export default ThemeContext;
2. 컨텍스트 제공
이제 ThemeProvider
를 사용하여 애플리케이션에 컨텍스트를 제공합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);
3. 컨텍스트 사용
컨텍스트 값을 사용하려면 useContext
훅을 사용할 수 있습니다.
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedButton = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button
onClick={toggleTheme}
style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#000' : '#fff',
}}
>
Toggle Theme
</button>
);
};
export default ThemedButton;
4. 전체 예제
위의 모든 코드를 결합하여 테마 토글 애플리케이션을 완성합니다.
// ThemeContext.js
import React, { createContext, useState } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export default ThemeContext;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);
// App.js
import React from 'react';
import ThemedButton from './ThemedButton';
const App = () => {
return (
<div>
<h1>Hello, World!</h1>
<ThemedButton />
</div>
);
};
export default App;
// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedButton = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button
onClick={toggleTheme}
style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#000' : '#fff',
}}
>
Toggle Theme
</button>
);
};
export default ThemedButton;
위 코드는 컨텍스트 API를 사용하여 전역 상태를 관리하고, 테마를 토글하는 간단한 예제입니다. ThemeProvider
는 테마 상태를 제공하고, ThemedButton
컴포넌트는 이를 사용하여 테마를 변경합니다.
컨텍스트 API의 장점과 단점
장점
- 간단한 상태 관리: 컨텍스트 API는 설정이 간단하고, 리덕스와 같은 외부 라이브러리 없이도 전역 상태를 관리할 수 있습니다.
- Props Drilling 방지: 깊게 중첩된 컴포넌트 트리에서도 props를 일일이 전달하지 않고 상태를 공유할 수 있습니다.
단점
- 성능 문제: 컨텍스트 값이 변경될 때마다 해당 컨텍스트를 사용하는 모든 컴포넌트가 리렌더링됩니다.
- 복잡한 상태 관리 어려움: 리덕스와 비교해 미들웨어를 통한 복잡한 상태 관리가 어렵습니다.
주요 포인트 요약 및 추가 학습 자료
이 포스팅에서는 리액트의 Context API를 사용하여 상태를 관리하는 방법을 살펴보았습니다. Context API는 간단한 설정으로 전역 상태 관리를 가능하게 하며, props drilling 문제를 해결할 수 있습니다. 하지만 성능 문제와 복잡한 상태 관리가 필요한 경우에는 리덕스와 같은 라이브러리와 함께 사용하는 것이 좋습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다: