useContext

전역에서 관리해야 하는 데이터를 props로 넘기지 않고도 전달할 수 있는 리액트 훅

(prop Driling을 하면서 발생하는 불필요한 전달과정을 생략할 수 있음.)

 

context 만들기

import { createContext } from 'react'
export const HandlerContext = createContext(null)

context API의 createContext 를 통해 context를 만들어주고 이 context의 provider로 해당 컴퍼넌트 전역에 값이나 변수를 전달해주는 것이다. 이 context에 저장된 값들은 결국 하위 컴포넌트에서 사용을 하겠다고 신청을 해야하는데 그것이 바로 useContext 훅이다. 사용신청을 위한 훅은 간단하다. 객체분할을 통해 context에서 원하는 값을 빼오겠다고 하면 된다.

    <HandlerContext.Provider value={{ doneHandler, deleteHandler }}>
    </HandlerContext.Provider>

  const { deleteHandler, doneHandler } = useContext(HandlerContext)

이렇게 신청을 하면 context는 가지고 있던 deleteHandler와 doneHandler를 사용할 수 있도록 제공해준다.