useContext

props drilling이나 하위 컴포넌트 한곳에서 쓰는 변수를 쭉 내려주는 그런 수고를 덜하기 위한것

상위컴포넌트에서 useContext를 쓰면 props를 내려주지 않고 불러와서 쓰면 된다.

단점으로 context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다.
Props drilling을 피하기 위한 목적이면 컴포넌트 합성을 먼저 고려하자.

//context.js
import{createContext} from "react"

export const Context = createContext(null)

그리고 상위 컴포넌트를 덮어준다

return(
<Context.Provider value={넘기고 싶은 값}>
	<main.js>
</Context.Provider>
)

이렇게 값을 넘겨주고
쓰고싶은 컴포넌트에서

import {useContext} from 'react'

//하고
const {값} = useContext(Context);
//값은 비구조할당 방식으로 넣어주면 된다/

이렇게 쓰고 다른 값을 또 전역적으로 보내주고 싶다면 컴포넌트 또 만들어서 Provider 바깥에 더 씌워주면 된다.