[React Hooks] useContext & Context

배경지식

부모 컴포넌트에서 자식 컴포넌트로 props 를 통해 데이터를 전달함
하지만 그 깊이가 깊어질수록 거쳐가야 하는 컴포넌트들이 많아지고 코드를 반복적으로 작성해야하고
변수명이 바뀌면 거쳐가는 모든 컴포넌트에서 변수명을 수정해야하는 비효율적인 일들이 발생함.

 

Context 란

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

- 데이터가 필요할 때마다 props 를 통해 전달할 필요가 없이 context 를 이용해 공유함

context 는 꼭 필요할때만!

- context 를 사용하면 컴포넌트를 재사용하기 어려워질 수 있음
- prop drilling 을 피하기 위한 목적이라면 component composition ( 컴포넌트 합성 ) 을 먼저 고려해야함.

 

Context API 의 세가지 개념

 

createContext

- Context 객체를 생성함

import { createContext } from "react";

export const userContext = createContext(null)

대부분 context 파일을 따로 만드는 편인듯
- createContext 의 인자값은 초기값으로 Provider 에서 value 값을 전달하지 않으면 초기값으로 값이 전달된다.

 

Provider

- 생성한 context 를 하위 컴포넌트에게 전달하는 역할을 한다.

function App() {
  const [ user, setUser ] = useState("")

  const handleChangeInput = (e) => {
    setUser(e.target.value)
  }

  return (
    <UserContext.Provider value={user}>
      <div className="App">
        <input type="text" placeholder='username' onChange={handleChangeInput} />
        <User />
      </div>
    </UserContext.Provider>
  );
}

user 말고 몇 개 더 value 로 넣고 싶다면 , {} 중괄호를 하나 더 추가해 오브젝트로 값을 넣어주면 된다.

 

Consumer

- context 의 변화를 감시하는 컴포넌트

 

useContext 사용하기

import React, { useContext } from "react";
import { UserContext } from "../\bcontext/UserContext";

function User() {
  const user = useContext(UserContext);
  return <div>안녕하세요 {user}입니다.</div>;
}

export default User;

데이터를 갖고 있는 context 를 useContext 를 사용해서 불러와준 뒤, 변수에 저장을 해준다.