[React/Udemy] 강의 내용 정리 - Section #10 - Context(Context API)

ZenTechie·2023년 4월 21일
0

Udemy

목록 보기
3/4


이제까지 props를 전달할 때 다이렉트로 전달하지 않고 계층적으로 전달했다.
예를 들어, a, b, c라는 컴포넌트가 있고 a는 b와 c를 가지는 부모 컴포넌트 라고 하자.
c에서의 state를 b로 전달하려고 하면, propsc → a → b 의 과정을 거쳐서 보내게 된다. 정작, a에서는 props를 사용하지 않는데도 말이다.

이것이 꼭 문제가 되는 것은 아니지만, 앱이 커지면 커질수록 전달하는 경로가 매우 길어질 수 있다.
이때 사용할 수 있는 개념이 Context이다.


Context 란?

React Context 는 리액트에 내장된, 내부적인 state 저장소 이다.
props를 계층적으로 부모를 통해 전달하지 않고 직접적으로 전달할 때 쓰인다.

앱의 어떤 컴포넌트에서라도 직접 변경하여, 앱의 다른 컴포넌트에 직접 전달할 수 있게 해준다.

Context 사용하기

Context를 사용하는 방법에는 2가지가 있다.
1. Context Provider, Consumer
2. useContext

Provider & Consumer

Provider & Consumer를 사용할 때는 다음 4단계를 거친다.

1. createContext 메소드를 사용해서 context를 생성.

// 생성법
const [컨텍스트이름] = React.createContext([defaultValue])
// 예제 코드
const AuthContext = React.createContext({
  isLoggedIn : false,
});

2. 생성된 context를 가지고 Provider로 부모 컴포넌트를 감싼다.

// Provider
<AuthContext.Provider></AuthContext.Provider>

3. value prop을 사용해서 context Provider에 원하는 값을 넣는다.

<AuthContext.Provider value={{ isLoggedIn: false }}>
</AuthContext.Provider>

4. context Consumer를 통해 해당 state를 사용할 컴포넌트에서 그 값을 불러온다.

// Consumer
<AuthContext.Consumer>
  {(ctx) => {
    { ctx.isLoggedIn && ... }
  }}
</AuthContext.Consumer>

useContext()

개인적으로 Provider & Consumer를 사용할 때 보다 더 간결해진다고 생각한다.

사용하는 방법은, 해당 state를 사용할 컴포넌트에서 useContext를 호출하면 된다.

// 자식 컴포넌트
const Child = () => {
  const context = useContext(AuthContext);
  return ( ... );
}

Context의 한계

context앱 전체 또는 컴포넌트 전체 state
에는 적합할 수 있다.
(기본적으로 여러 컴포넌트에 영향을 미치는 state에 말이다.)
하지만 컴포넌트 구성을 대체할 수는 없다.

즉, 구성을 하려면 props를 사용하고, 컴포넌트 또는 전체 앱에서 state 관리를 하려면 context를 사용한다.

그러나, 이와 같이 사용해도 한계는 존재한다.
state의 변경이 잦은 경우에는 context는 적합하지 않다.
(예를 들어, state가 1초에도 수십 번씩 바뀌는 경우)

이럴때는 redux를 사용한다.

profile
데브코스 진행 중.. ~ 2024.03

0개의 댓글