useContext

What is useContext hook?

const value = useContext(MyContext);

context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정됩니다

React 공식 문서
https://ko.reactjs.org/docs/hooks-reference.html#usecontext

Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다.
전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다.

(출처: https://dev-yakuza.posstree.com/ko/react/context-api/)

즉, context를 이용해서 props로 전달할 필요 없이 전역적으로 공유한다

Why we use

이전 글을 참고하자
https://velog.io/@jdh4601/React-Props-Drilling

How to use

const countContext = createContext(null);

<AppContext.Provider value={user}>
    <Children />
</AppContext.Provider>

• createContext : context 객체를 생성하는 역할
• Provider : 생성한 context를 하위 컴포넌트를 감싸서 전달한다
• Consumer : context의 변화를 감시하는 컴포넌트
• value : 전달하고자 하는 값

Example

context.js 컴포넌트

import { createContext } from 'react';

export const countContext = createContext(null);

App.js

<countContext.Provider value={{ count, setCount }}>
	<DisplayCount count={count} setCount={setCount} />
</countContext.Provider>

컴포넌트에게 전달하고 싶은 props데이터의 초깃값을 넣어두고 <countContext.Provider>으로 묶어준다
이때 value={} 안으로 넣어준다
(하지만 value안의 값이 변할 때마다 이 값을 사용하는 컴포넌트 전체가 리렌더링 되므로 useMemo hook을 사용해서 캐싱해두도록 하자)

DisplayCount.js

function DisplayCount() {
	const { count } = useContext(countContext);
		return (
			<div>
				count: {count}
				<Button />
			</div>
		);
	}

useContext hook을 이용하면 사용하지 않는 props를 전달할 필요가 없어 가독성을 높일 수 있을 뿐 아니라, props.count 처럼 props를 사용하지 않아도 된다
즉, props를 global하게 사용할 수 있다는 것이다

🤔 그렇다면 props를 받아오지 않아도 되는걸까?

context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문에 꼭 필요할 때만 사용해야 한다
단지 prop drilling을 피하기 위한 목적뿐이라면, component composition을 먼저 고려하자

Reference

https://www.zerocho.com/category/React/post/5fa63fc6301d080004c4e32b
https://velog.io/@jminkyoung/TIL-6-React-Hooks-useContext-%EB%9E%80