리액트의 Context API
REACT
해당 포스팅에서는 REACT의 Context API에 대해 다룹니다.
이번 포스팅 목차
- REACT의 Context API
리액트의 Context API
Context API 컴포넌트 트리 전체에 데이터를 효율적 으로 전달하고 사용할 수 있도록 하는 강력한 기능입니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 props 를 일일이 전달하지 않고도 전역적으로 데이터를 공유 할 수 있습니다.
1. Context API의 개념
Context 는 리액트 애플리케이션에서 전역적 인 데이터를 관리하고, 트리의 여러 수준에 걸쳐 이 데이터를 전달할 때 사용됩니다. 이는 주로 테마, 사용자 정보, 인증 상태 등의 데이터를 다룰 때 유용합니다.
2. Context API의 주요 구성 요소
템플릿 리터럴 을 사용하면 문자열 내에서 변수와 표현식을 더 간편하게 삽입할 수 있습니다. 백틱을 사용하여 문자열을 감싸며, ${} 구문을 사용하여 변수를 포함할 수 있습니다.
React.createContext
새로운 Context 객체를 생성합니다. 이 객체는 Provider와 Consumer 두 가지 주요 컴포넌트를 포함합니다.
1
const MyContext = React.createContext(defaultValue);
Provider
Provider 컴포넌트는 Context를 구독하는 컴포넌트들에게 값을 전달합니다. Provider는 value prop을 받아 하위 트리에 있는 모든 컴포넌트에 값을 제공합니다.
1
2
3
<MyContext.Provider value={/* some value */}>
{/* components that can access the context */}
</MyContext.Provider>
Consumer
Consumer 컴포넌트는 Context의 값에 접근 할 수 있습니다. 함수 컴포넌트의 경우, useContext 훅을 사용하여 더 간편하게 접근할 수 있습니다.
1
2
3
<MyContext.Consumer>
{value => /* render something based on the context value */}
</MyContext.Consumer>
3. Context API 사용 예시
Context 생성 및 Provider 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { createContext, useState } from 'react';
// 1. Context 생성
const ThemeContext = createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
// 2. Provider 사용, 트리 전체에 값 전달
<ThemeContext.Provider value=Jekyll::Drops::ThemeDrop>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
Consumer 사용
ThemedButton 컴포넌트에서 Consumer를 사용하여 Context에 접근합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ThemedButton() {
return (
<ThemeContext.Consumer>
{({ theme, setTheme }) => (
<button
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
style=
>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
);
}
4. useContext 훅 사용
함수형 컴포넌트에서는 useContext 훅을 사용하여 더 간편하게 Context에 접근할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { useContext } from 'react';
function ThemedButton() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
style=
>
Toggle Theme
</button>
);
}
5. Context API의 장점과 단점
장점
전역 상태 관리: props drilling 없이 전역적으로 상태를 관리하고 전달할 수 있습니다.
코드 가독성 향상: 상위 컴포넌트에서 하위 컴포넌트로 props를 반복적으로 전달 하지 않아도 되므로 코드 가독성이 향상됩니다.
유연성: 여러 Context를 사용하여 다양한 전역 상태를 독립적으로 관리할 수 있습니다.
단점
성능 이슈: Context 값이 변경되면 이를 구독하는 모든 컴포넌트가 리렌더링됩니다. 따라서 성능 최적화 를 위해 필요에 따라
React.memo와 같은 최적화 기법을 사용해야 합니다.구조 복잡성: 많은 Context를 사용하면 트리 구조가 복잡해질 수 있으며, 관리가 어려울 수 있습니다.
6. 고급 사용 사례
Context의 동적 값 업데이트
Provider의 value는 동적으로 변경될 수 있으며, 이를 통해 보다 유연한 상태 관리를 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const ThemeContext = createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value=Jekyll::Drops::ThemeDrop>
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
style=
>
Toggle Theme
</button>
);
}
마무리
리액트의 Context API 는 전역적 상태 관리와 데이터 전달 을 효율적으로 할 수 있는 강력한 도구입니다. 이를 통해 props drilling 문제를 해결하고, 전역적으로 데이터를 공유할 수 있습니다. 하지만 성능 이슈와 구조 복잡성을 고려하여 적절히 사용하는 것이 중요합니다. useContext 훅을 통해 함수형 컴포넌트에서도 쉽게 Context에 접근할 수 있으며, Context API를 올바르게 사용하면 리액트 애플리케이션의 코드 가독성과 유지보수성을 크게 향상시킬 수 있습니다.