contextAPI , useContext

리액트에서 context API를 사용하는이유?

→ 리덕스나 mobX는 간단한 상태관리를 하기에는 무거운편이다.

그래서, 간단한 props들을 전역에서 관리할때는 contextAPI, useContext를 쓰는게 이득이다.


// App.jsx (컴포넌트의 부모컴포넌트)
export const TodoContext = React.createContext(); // export를 꼭 해준다.
// createContext를 통해 context 공간을 만들어준다.

return // context의 Provider 공간에 props들을 value프로퍼티로 넘겨준다! 
<TodoContext.Provider value={{넘겨줄props...}}> 
	<컴포넌트1/>
	<컴포넌트2/>
	<컴포넌트3/>
</TodoContext.Provier>
// 컴포넌트에 직접 props를 넘겨주지않아도, 컴포넌트의 부모가 context의 Provider이기 때문에 
// 각각의 컴포넌트에서 사용이 가능하다.


// 부모 컴포넌트에서 설정한 context를 하위 컴포넌트에서 사용하는 방법 1 : Consumer로 감싸준다.
// 컴포넌트1.jsx 
import { TodoContext } from "./App.jsx"

return (
<TodoContext.Consumer>
	{
		({todos}) => (
			<>
				<컴포넌트내용1/>
				<컴포넌트내용2/>
				<컴포넌트내용3/>
			</>
		)
	}
</TodoContext.Consumer>
)


// 부모 컴포넌트에서 설정한 context를 하위 컴포넌트에서 사용하는 방법 2 : useContext 훅을 이용한다.
// 컴포넌트1.jsx
import { useContext } from "react"
import { TodoContext } from "./App.jsx"

const 컴포넌트1 = () => {
	const { todos, 받은 props... } = useContext(TodoContext);
	return (
	<>
		<컴포넌트내용1/>
		<컴포넌트내용2/>
		<컴포넌트내용3/>
	</>
 }
)