🟡 context api란?

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.(전역적 사용)

• 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있도록 나온 개념으로,
  리액트 context는 앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용하다!
• 사용자 로그인 데이터, 테마(theme), 언어 등 다양하게 컴포넌트 간 공유되어야할 데이터로 사용된다.

🟡 언제? 왜 사용할까?

• React에서 props drilling을 해결하기 위한 방법 중 하나로 자주 사용한다.
• 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 것이 아니라, createContext()를 통해 Provider와 Consumer를 생성하여 데이터를 전역적으로 관리할 수 있다.
  Provider 로 감싸진 컴포넌트는 Consumer로 감싸진 하위 컴포넌트에서 Provider에서 설정한 값을 props로 전달받을 수 있다.
• 따라 전역적으로 값을 공유해야할 것이 있을 때에 사용하면 된다.

❗props drilling 이란?

• Props drilling이란 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미한다.
  해당 props 를 사용하지 않는 컴포넌트에게까지 말이다.

🟡 사용방법

리액트 context 를 사용하기 위한 네 단계는 다음과 같다.
1. createContext 메서드를 사용해 context 를 생성한다.
2. 생성된 context 를 가지고 context Provider 로 컴포넌트 트리를 감싼다.
3. vlaue prop 을 사용해 context provider 에 원하는 값을 입력한다.
4. context consumer 를 통해 필요한 컴포넌트에서 그 값을 불러온다.

• context 란?
  • 데이터를 관리하는 객체. crateContext() 메소드를 사용하여 생성할 수 있다.
• Provider 컴포넌트란 ?
  • context 객체를 이용하여 데이터를 제공하는 컴포넌트이다. 데이터를 제공할 값(value) 를 설정할 수 있다.

- 구체적으로 알아보자

import { createContext } from 'react';

const MyContext = createContext();

• Context 객체 안에는 Provider라는 컴포넌트가 들어있다.
  그리고, 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있다.

function App() {
  return (
    <MyContext.Provider value="Hello World">
      <GrandParent />
    </MyContext.Provider>
  );
}

• 이렇게 하면, 원하는 컴포넌트에서 useContext 라는 Hook을 사용하여 Context에 넣은 값에 바로 접근할 수 있다.
  해당 Hook의 인자에는 createContext로 만든 MyContext를 넣으면 된다.

import { createContext, useContext } from 'react';

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

• 이렇게 하면 중간 중간 여러 컴포넌트를 거쳐 전달하던 Props를 지워주어도된다.

- 예시

Context API를 사용하지 않은 경우

function App() {
  const [data, setData] = useState("Hello, World!");

  return (
    <>
      <Header data={data} />
    </>
  );
}

function Header(props) {
  return <FirstContent data={props.data}/>;
}

function FirstContent(props) {
  return <SecondContent data={props.data}/>;
}

function SecondContent(props) {
  return <ThreeContent data={props.data}/>;
}

function ThreeContent(props) {
  return <p>WOW! {props.data}</p>;
}

• 위의 코드에서 보이듯 App 컴포넌트에서 데이터를 관리하고, 해당 데이터를 Header, Content, Footer 컴포넌트로 전달하고 있다.
• 이러한 Props Drilling 코드는 컴포넌트가 더 많아질수록 복잡하고 어려워 질 것이다. 이 데이터가 어디에서 오는지 상위 컴포넌트를 타고, 타고 거슬러 올라가야하기 때문에 확인하는 것도 매우 불편해질 것이고..

Context API를 사용한 경우

import React, { createContext, useState } from "react";

const DataContext = createContext();

function App() {
  const [data, setData] = useState("Hello, World!");

  return (
  <DataContext.Provider value={data}>
  <Header />
  </DataContext.Provider>
  );
}

function Header() {
  return <FirstContent />;
}

function FirstContent() {
  return <SecondContent />;
}

function SecondContent() {
  return <ThreeContent />;
}

function ThreeContent() {
  const data = useContext(DataContext);
  return <p>WOW! {data}</p>;
}

• createContext() 를 사용하여 Context 객체를 생성하고, App 컴포넌트에서 생성한 data state 를 DataContext.Provider 의 value prop 으로 전달한다.
• 그 다음 사용할 컴포넌트에서 useContext() 훅을 사용해 사용해주기만 하면 된다. 정말 깔끔하다!

- 내가 실제 사용한 방법

나는 firebase 와 nextron 을 가지고 채팅앱을 만들 때 유저의 로그인 여부를 저장하는데에 사용했다.
(사실 상태관리 라이브러리인 recoil 을 사용해야하나 삽질했다가, 삽질 후 로그인 여부를 저장하는데에는 적절치 않다는 것을 알았다...)
당시 context api 는 처음이였던터라 엄청 더듬거리면서 만들었던 기억이..😭

아래는 crateContext() 메소드로 기초 상태를 설정해주고,
로그인 사용자 정보를 관찰하는 코드를 작성했다.

// - AuthContext.tsx

export const AuthContext = createContext(undefined);

export const AuthContextProvider = ({ children }) => {

  const [currentUser, setCurrentUser] = useState<IUser>(null);
  
  useEffect(() => {
    // 현재 로그인된 사용자 정보 관찰
    const unsub = onAuthStateChanged(auth, user => {
      setCurrentUser(user);
    });

    // cleanup fn
    return () => {
      unsub();
    };
  }, []);
  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

이 아래는 만들어놓은 context 를 사용한 코드다.

function Navbar() {
  const auth = getAuth();
  // 현재 로그인된 사용자 정보
  const { currentUser } = useContext(AuthContext);

  .
  .
  .

  return (
    <div className="navbar">
      <span className="username">
        🟢 {currentUser ? currentUser.email : ""}
      </span>
      <button onClick={onClick}>Logout</button>
      <style jsx>{`

value 에 currentUser 를 전달해서 거의 모든 컴포넌트에서 사용했다.

🟡 주의할 점

• 먼저, context 가 내려주는 값은 업데이트가 불가능하다.
• 만약 리액트 context provider 에 객체를 내려주고 있고 그 객체의 프로퍼티가 업데이트된다면 어떨까?
  그 context 를 사용하고 있는 모든 컴포넌트에서 재렌더링이 발생할 것이다(...)
• state 가 거의 없는 theme 데이터 등에 사용해야 성능 이슈가 발생하지 않을 것이다. 테마 데이터는 업데이트가 자주 되지 않으니까 말이다. 이를 주의해서 사용해야 한다!

---

참고자료_1
참고자료_2
참고자료_3