Context, Provider, Consumer, useContext()

앱의 규모가 커질수록 props로 받아와야하는 데이터가 있을 경우 복잡해진다.

필요한 데이터를 부모로부터 받는 컴포넌트에서만 prop을 사용한다면, 부모를 통해 데이0터를 전달하지 않아도 괜찮다.

부모가 데이터를 관리하거나 전송하지 않기 때문

>> 리액트에 내장된, 내부적인 state저장소(리액트 컨텍스트)를 사용하면 액션을 트리거할 수 있음.

 

---

* Context

context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다.

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰세요.

 

context를 모아둔 폴더명은 보통 store로 지정. context로 지정해도 상관은 없다.

Context – React

context API

React.createContext();

const MyContext = React.createContext(defaultValue);

React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽어온다. (공급)

defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값.

 

import React from 'react';

//context는 일반적으로 객체
const AuthContext = React.createContext({
	isLoggedIn: false;
});

export default AuthContext;

import AuthContext from './store/auth-context';

  return (
    <AuthContext.Provider>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
  );

AuthContext는 그 자체만으로는 컴포넌트가 될 수 없기 때문에, Provider를 사용해서 해당 context가 필요한 컴포넌트들을 감싸주면 된다. (그러면 해당 AuthContext 내에 있는 자손 컴포넌트들은 모두 AuthContext에 접근해서 데이터 사용 가능)

단, context 객체 내부에 default 기본값이 있으면 Provider가 필요하지 않다. 

하지만 보통 변할 수 있는 값을 사용하는데, 그건 Provider만이 할 수 있다

 

그럼 값을 받아올 때는?

리액트 훅을 사용하거나, Consumer를 사용한다. (보통은 리액트 훅으로 받아옴)

Consumer는 child(자식)를 가지고, 함수여야 한다.

<AuthContext.Consumer>
	//인수로 context data를 가져온다.
	{(ctx)=>{
        return (//그리고 여기서 jsx코드 반환~)
    }}
</AuthContext.Consumer>

 

Provider에서 value로 공급한 context(객체 등)는 자식 컴포넌트 내에서 전부 활용할 수 있는데,

이는 Consumer에서 props가 아닌 context 데이터를 활용할 수 있다는 것이다.

 

---

* useContext훅으로 컨텍스트에 탭핑(tapping)하기

 

import React, { useContext } from "react";

import classes from "./Navigation.module.css";
import AuthContext from "../../store/auth-context";

const Navigation = (props) => {
  const ctx = useContext(AuthContext);
  //ctx: context 데이터
  return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Users</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Admin</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <button onClick={props.onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};

export default Navigation;

useContext 내장 훅을 사용해서 context data를 상수로 받아오면, 

Consumer를 사용해 child내에 함수로 jsx코드를 반환하지 않아도 context 값을 가져와서 사용할 수 있다.

Consumer를 사용해서 ctx값을 받아와도 괜찮지만, 조금 더 깔끔하게 코드를 짤 수 있는 방법 useContext()

 

---

* 동적 Context

 

context로 문자열이나, 객체등의 고정된 값을 전달할 수는 없지만 함수를 전달할 수는 있다.

함수를 실행시키는 함수()가 아니라, 함수를 가리키는 포인터를 전달할 수 있음 !

    <AuthContext.Provider
      value={{
        //고정된 값인 false가 아닌 useState로 관리중인 isLoggedIn을 인자로 사용하면, 동적으로 활용할 수 있다.
        //이렇게 Provider에 isLoggedIn객체를 설정해두면, 컴포넌트에서 props를 사용할 필요가 없다.
        //ex. MainHeader내부에서 isLoggedIn을 props로 전달할 필요가 없는것.
        isLoggedIn: isLoggedIn,
        //문자열이나 객체 등의 값을 전달할 수는 없지만, 함수는 전달할 수 있다.
        onLogout: logoutHandler,
      }}
    >
      <MainHeader />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>

 

1. props를 사용할 때,

- 컴포넌트에 데이터를 전달할 때

- props는 컴포넌트를 구성하고 재사용할 수 있게 하기 때문

 

2. Context를 사용할 때, 

- navbar등에서 특정한 일을 하는 버튼(ex. 로그아웃) 등의 컴포넌트로 전달하는 경우에만 context를 사용한다.