[리액트] useContext

useContext란?

컴포넌트 간에 데이터를 쉽게 공유해주는 훅함수.

 

리액트에서 Props는 부모컴포넌트에서 자식컴포넌트의 방향으로만 데이터를 전달할  수 있다.

그래서  Props Driling이라는 문제가 발생하게 된다.

Props Driling은 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들이 계속해서 props를 전달 해야하는 현상을 말한다. 

예를 들어, 아래와 같은 상황이다

function GrandChild({ message }) {
  return <p>{message}</p>;
}

function Child({ message }) {
  // Child에서는 message 안 써도 그냥 전달해야 함
  return <GrandChild message={message} />;
}

function Parent({ message }) {
  // Parent도 마찬가지로 그냥 전달
  return <Child message={message} />;
}

function App() {
  const message = "Hello React!";
  return <Parent message={message} />;
}

 

 

이럴 때 필요한 것이 Context. 전역적인 상태 저장소라고 생각하면 된다.

그리고 이 Context를 만드는 함수가 createContext. 사용하는 함수가 useContext다.

 

import { createContext, useContext } from "react";

const MessageContext = createContext();

function GrandChild() {
  const message = useContext(MessageContext); // 👈 바로 꺼내쓰기
  return <p>{message}</p>;
}

function Child() {
  return <GrandChild />;
}

function Parent() {
  return <Child />;
}

function App() {
  const message = "Hello React Context!";
  return (
    <MessageContext.Provider value={message}>
      <Parent />
    </MessageContext.Provider>
  );
}

 

createContext()는 데이터 저장소(컨텍스트 객체)를 만든다. 

그리고 createContext로 만들어지는 Context객체에는 Provider라는 속성을 가진다.

이 Provider로 감싸서 value를 전달하면,  이 Provider 하위의 모든 컴포넌트에서 이 value에 대해 useContext를 통해 접근이 가능해진다.

 

useContext는 Provider가 공급한 value를 꺼내 쓰는 훅이기 때문이다.

이걸 쓰면 props로 전달할 필요없이 전역에서 바로 접근할 수 있게된다.