Context API

일일이 props를 넘겨주지 않고 컴포넌트 트리 전체에 데이터를 전달할 수 있게 하는 방식
리액트 컴포넌트 간에 값을 전역적으로 공유할 수 있게 해주는 기능

props만 사용하지 않는 이유?

깊숙히 위치한 컴포넌트에 최상위 컴포넌트의 데이터를 전달해야하는 경우,
여러 컴포넌트를 거치며 props를 전달해야 한다. (props drilling)
또한, 하위에서 상위로 데이터를 전달하는 과정이 매우 불편하며, 사용성이 떨어진다.
그래서 우리는 context라는 데이터 보관함을 만들어서 전역적으로 상태를 관리해준다.

Context 사용순서
1. context 파일을 생성해준다 (createContext) => export
2. context를 사용할 컴포넌트에 import
3. 전역적으로 관리해줄 컴포넌트를 Context.Provider로 감싸준다
4. 데이터를 받아올 컴포넌트에서는 useContext 함수를 이용한다

Context 사용순서

1. Context 폴더 생성

src -> context 폴더 생성 -> context 파일 생성

2. Context 생성

import {createContext} from 'react';

export const Context파일명 = createContext(null)

// export를 반드시 붙여야 사용할 수 있다.

3. Context 사용

// 최상위 컴포넌트에서 return문을 <Context파일명.Provider>로 감싸줘야함

import {Context파일명} from './context/Context파일명'

return (
	<Context파일명.Provider value={value}>
		<Component></Component>
	</Context파일명.Provider>
)

// value는 객체 형태로 작성한다.
// value = {{state1, setState1, state2, setState2...}}

// 하위 컴포넌트에서 사용할 때
import React, { useContext } from 'react'
import { Context파일명 } from '../context/Context파일명';

const {value} = useContext(Context파일명);