📖 Context

1. Props 전달의 문제점

👉 React 앱의 일반적인 데이터 송/수신 구조는 '위에서 아래로 props를 전달'하도록 구성되어 있다. 문제는 컴포넌트 중첩 단계가 복잡해지면 props ⇌ callback 문'가 발생하므로 앱 관리가 매우 어려워진다.

2. Context를 사용한 데이터 공유

👉 context는 React 컴포넌트 트리 안에서 데이터를 글로벌(Global)하게 공유할 수 있도록 고안된 방법이다. context를 사용하여 컴포넌트 트리(Components Tree)에 데이터를 공급(Provider) 하거나, 수요(Consumer) 할 수 있도록 설정하여 데이터 관리를 보다 수월하게 할 수 있다.

3. Context 적용

✍ Exmple

// 인증 정보 값을 가진 컨텍스트를 생성하고 초기 값 설정.
const AuthContext = React.createContext(false);

// AuthContext.Provider 요소를 사용해 인증 정보를 값(value)으로 설정.
class App extends React.Component {
  state = {
    authentification: true
  };
  render() {
    return (
      <AuthContext.Provider value={this.state.authentification}>
        <MenuBar />
      </AuthContext.Provider>
    )
  }
}

// A(MenuBar)는 전달 과정 불 필요.
const MenuBar = () => (
  <SignIn />
)

// AuthContext.Consumer를 통해 전달 받은 
// 값(value)을 사용해 렌더링.
const SignIn = () => (
  <AuthContext.Consumer>
    {
      (context) => context ? 
        <div className="signed">로그인 됨</div> : 
        <div className="un-signed">로그인 필요</div>
    }
  </AuthContext.Consumer>
)

4. Context 분리 및 개별 컴포넌트의 적용

👉 인증 정보 및 변경 메서드를 가진 AuthContext 개별 파일로 생성.

✍ Exmple

export const authContext = {
  isAuth: false,
  signIn = () => { ... }
}

export default React.createContext(authContext);

👉 컴포넌트 트리의 시작점이 되는 (부모) 컴포넌트는 AuthContext를 불러와 데이터를 공급자(Provider)로 설정한 후, 공급 할 데이터 값(value)을 전달한다.

✍ Exmple

import AuthContext from "./context/AuthContext";

class App extends React.Component {
  state = {
    authentification: true
  }
  logIn = () => {
    // 로그인 ... 
  }
  render() {
    return (
      <AuthContext.Provider 
        value={{ isAuth: this.state.authentification, signIn: this.logIn }}
      >
        <MenuBar />
      </AuthContext.Provider>
    )
  }
}

👉 컴포넌트 트리의 (부모) 컴포넌트에서 공급 된 데이터를 전달 받기 위해 AuthContext를 불러와 수요자(Consumer)로서 데이터를 받아 처리할 수 있다.

✍ Exmple

import AuthContext from "../context/AuthContext";

const SignIn = () => (
  <AuthContext.Consumer>
    {
      ({isAuth, signIn}) => isAuth ? 
        <div className="signed">로그인 됨</div> : 
        <button type="button" onClick={() => signIn}>로그인</button>
    }
  </AuthContext.Consumer>
);

5. Context Type활용

👉 컨텍스트 타입은 컨텍스트 객체를 클래스 컴포넌트의 contextType 스태틱(Static) 속성으로 지정해 활용하는 방법이다. 이 방법을 사용하면 this.context를 통해 컨텍스트 객체에 접근해 값을 읽고 사용할 수 있다.

📌 컨텍스트 타입을 사용하면 단 하나의 컨텍스트 객체만 사용 가능하다. 하나 이상의 컨텍스트 객체를 사용하려면 앞서 살펴 본 Context.Consumer를 중첩해 사용해야 한다. 자세한 내용은 여러 cotext 구독하기 살펴보길...

📌 함수형 컴포넌트는 useContext() 훅(Hook)을 사용한다.

✍ Exmple

import AuthContext from "../context/AuthContext";

class SignIn extends Component {
  static contextType = AuthContext
  render() {
    const { isAuth, signIn } = this.context
    return (
      {
        isAuth ? 
          <div className="signed">로그인 됨</div> : 
          <button type="button" onClick={() => signIn}>로그인</button>
      }
    );
  }
}