이제까지 props
를 전달할 때 다이렉트로 전달하지 않고 계층적으로 전달했다.
예를 들어, a, b, c라는 컴포넌트가 있고 a는 b와 c를 가지는 부모 컴포넌트
라고 하자.
c에서의 state를 b로 전달하려고 하면, props
를 c → a → b
의 과정을 거쳐서 보내게 된다. 정작, a에서는 props를 사용하지 않는데도 말이다.
이것이 꼭 문제가 되는 것은 아니지만, 앱이 커지면 커질수록 전달하는 경로가 매우 길어질 수 있다.
이때 사용할 수 있는 개념이Context
이다.
React Context
는 리액트에 내장된, 내부적인 state 저장소
이다.
props를 계층적으로 부모를 통해 전달하지 않고 직접적으로 전달할 때 쓰인다.
앱의 어떤 컴포넌트에서라도 직접 변경하여, 앱의 다른 컴포넌트에 직접 전달할 수 있게 해준다.
Context를 사용하는 방법에는 2가지가 있다.
1. Context Provider, Consumer
2. useContext
Provider & Consumer를 사용할 때는 다음 4단계를 거친다.
// 생성법
const [컨텍스트이름] = React.createContext([defaultValue])
// 예제 코드
const AuthContext = React.createContext({
isLoggedIn : false,
});
// Provider
<AuthContext.Provider></AuthContext.Provider>
<AuthContext.Provider value={{ isLoggedIn: false }}>
</AuthContext.Provider>
// Consumer
<AuthContext.Consumer>
{(ctx) => {
{ ctx.isLoggedIn && ... }
}}
</AuthContext.Consumer>
개인적으로 Provider & Consumer를 사용할 때 보다 더 간결해진다고 생각한다.
사용하는 방법은, 해당 state를 사용할 컴포넌트에서 useContext를 호출하면 된다.
// 자식 컴포넌트
const Child = () => {
const context = useContext(AuthContext);
return ( ... );
}
context
는앱 전체 또는 컴포넌트 전체 state
에는 적합할 수 있다.
(기본적으로 여러 컴포넌트에 영향을 미치는 state에 말이다.)
하지만 컴포넌트 구성을 대체할 수는 없다.
즉,
구성을 하려면 props를 사용
하고,컴포넌트 또는 전체 앱에서 state 관리를 하려면 context를 사용
한다.
그러나, 이와 같이 사용해도 한계는 존재한다.
state의 변경이 잦은 경우에는context는 적합하지 않다.
(예를 들어, state가 1초에도 수십 번씩 바뀌는 경우)이럴때는 redux를 사용한다.