React-Context

Context란?

React에는 Props를 통하여 부모-> 자식으로 값을 전달할 수 있다.
문제는 자식 컴포넌트가 증가할 수록 Props 전달하는데 번거로움이 생긴다.

<ParentComponent text="전달 Props">
	<Children1 text="전달 Props">
  		<Children2 text="전달 Props">
  			<Children3 text="전달 Props">
  				<Children4 text="전달 Props">
                  {text} // "전달 Props"
		  		</<Children4>
	  		</<Children3>
  		</<Children2>
  	</Children1>
</ParentComponent>

마지막 자식요소에 Props를 전달하려면 전부 거쳐가야한다.

이러한 과정없이 Props를 공유할 때 사용하는 것이 Context다.

사용 방법

1. createContext로 context 생성

// context.js
const Context = createContext();
export default Context

2. Context를 사용한 컴포넌트를 Provider로 감싸기

// app.js
function App(){
  return (
      <>
    	<Context.Provider value={}>
    		<Component/>
    	</Context.Provider>
      </>
  )
}

3. useContext를 사용하여 Value 값 호출하기

// Component.js
function Component(){
  const state = useContext(Context)
  return <div>{state}</div>
}

Context를 사용하여 만든 ToDo list