[React] React Hook - useContext & Context API

useContext 를 사용해야하는 이유

React 컴포넌트는 부모에서 자식으로 props 를 통해 데이터를 전달해야한다.

 

이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면

단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.

 

중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고,

해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다.

 

이런 문제를 해결하기 위해 우리는 useContext 를 사용한다.

전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트 까지 데이터 전달을 손쉽게 할 수 있다.

ex) 유저 정보, 테마, 언어, ...

 

하지만 Context 를 사용하게 된다면 컴포넌트의 재사용성이 떨어지므로 잘 생각하고 써야한다!

useContext 사용하기

유저 데이터를 반환하는 context 를 예시로 작성했다.

모든 코드는 해당 게시글 하단에 있는 링크에서 확인 가능하다! 직접 써보기도 가능!!

 

1. 전역으로 사용할 context 객체 생성

나는 context 객체를 루트 경로에 context 폴더를 새로 생성해 그 안에 선언했다.

 

아래의 형태로 선언을 해준다.

초기값은 Provider를 사용하지 않았을 때 적용되는 값이다.

createContext(초기값);

 

사용해보자! 나는 빈값을 정해줬다.

// src/context/UserContext.js

import { createContext } from "react";

export const UserContext = createContext("");

 

2. 최상단 컴포넌트에 선언

<UserContext.Provider> 로 감싸준 모든 하위 컴포넌트들은 value 로 넣어준  userData 와 setUserData에 접근할 수 있게 된다! 

 

만약 초기값이 정해져 있다면 Provider와 value 를 생략해도 된다.

하지만 난 최상단 컴포넌트에서 값을 지정해 줬으므로 Provider 와 value 를 사용한다.

// src/App.js

import { UserContext } from "./context/UserContext";
import { useState } from "react";

function App() {
  const [userData, setUserData] = useState("");

  return (
    <div className="App">
      <UserContext.Provider value={{ userData, setUserData }}>
        <Page />
      </UserContext.Provider>
    </div>
  );
}

 

 

3. 상위에서 선언된 데이터 가져오기

가져오고 싶은 상위 데이터는 useContext를 선언해 가져오면 된다!

객체 형태로 넘어 온다는 것을 잊지 말자.

// src/component/UseContext2.js

import { useContext } from "react";
import { UserContext } from "../context/UserContext";

export default function UseContext2() {
  const { userData, setUserData } = useContext(UserContext);

  const Login = () => {
    setUserData("NYCHicken");
  };

  const Logout = () => {
    setUserData("");
  };

  return (
    <div>
      <div className="description context-example">
        {userData === "" ? "로그인해주세요" : <HelloUser userData={userData} />}{" "}
      </div>
      <div className="btn-wrap">
        <button onClick={Login}>LOGIN</button>
        <button onClick={Logout}>LOGOUT</button>
      </div>
    </div>
  );
}

function HelloUser(props) {
  return <>{props.userData}님 반갑습니다!</>;
}

 

useContext 예제 코드 페이지

UseContext.js 와 UseContext2.js 및 context 폴더 확인!

 

https://github.com/mirro97/react-playground/tree/main/src/component

GitHub - mirro97/react-playground

 

useContext 예제 테스트 페이지

뭐든 직접 돌려봐야 이해가 간다. 돌려보자!

https://mirro97.github.io/react-playground-result/