context

지금까지 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달 할 때, props 를 사용해왔다.

프로젝트의 규모가 커지면 커질 수록 여러 컴포넌트들에게 전해줘야하는 props는 과정이 상당히 번거로울 수 있다.

이를 context 를 사용하면 쉽게 값을 공유할 수 있다.

---

📌 context ?

context 는 컴포넌트 안에서 전역적(global) 데이터를 공유할 수 있도록 고안된 방안이다.

예를 들어 props 를 사용하여 값을 전달해 줄때는 index -> container -> presenter 와 같은 과정을 거쳐 단계별로 값을 전달해 주었지만 context는 중간 단계를 건너 뛰고 바로 값을 전달해 줄 수 있다.

---

📌 사용법

어떤 Presenter 에 isEdit 이라는 값을 넘겨주고 싶다하면,

최상위 요소에서 context를 만들어주고 context의 값을 넘겨줄 컴포넌트들을 감싸주어야 한다

import {createContext} from 'react'
export const Context createContext({}) // react의 createContext를 선언
const ContextValue = {
	isEdit : true
}
export default function Page(){
  return (
  	<Context.Provider value={ContextValue}>
    		<Container/>	// presenter 를 return 해주고있다
      	</Context.Provider>
  )
}

이렇게 보내진 isEdit은 props 로 전달받지 않고 사용이 가능하다

import {useContext} from 'react'	// 받은 값을 사용하는 쪽에서 선언
import {Context} from '../../Page'
export default function presenter(){
	const {isEdit} = useContext(Context)
    return(
    	<div>{isEdit ? '수정' : '등록'}</div>
    )
}