useContext - 2부

useContext

// CardContext.jsx
export default const CardContext = createContext(null);

CardContext를 생성하는 createContext에 인자가 null 1개 들어가 있다. createContext의 인자는 defaultValue를 의미한다.

defaultValue

defaultValue란 말 그대로 기본값인데 이 기본값이 사용되는 조건이 있다. 즉, 무조건 필요하다는 것은 아니다. Context Provider가 감싸지 않은 자식 컴포넌트라면 Provider의 영역 밖이다. 이때는 createContext의 인자로 들어간 defaultValue를 사용한다.

//CardContext.jsx
export default const CardContext = createContext({
  title: '',
  updateCard: () => {}
})

defaultValue로 오브젝트를 설정해준 상태다. 이제 App.jsx로 가보자.

// App.jsx
function App() {
  const {title, updateCard} = useContext(CardContext);
  return (
    <>
    	<CardContext.Provider value={title, updateCard}>
    		// Provider에서 제공하는 title, updateCard 이용 가능
    		<Child />
    	</CardContext.Provider>
		// Provider 영역 밖이라 CardContext의 defaultValue를 통해 전역 데이터에 접근
		<Child2 />
    </>
  )
}

위 코드에서 Child2 컴포넌트는 Provider의 영역 밖에 있다. 그러면 이런 생각이 들 수도 있겠다. "Provier 밖에 있으니까 Child2는 CardContext를 통해 사용하는 전역 변수에 접근할 수 없지 않을까?"
전역 변수는 Context API를 통해 접근이 가능해진 상태이므로 Child2도 가능하다. 다만, Provider에서 제공하는 value={} props에 등록된 데이터가 아니라 defaultValue로 등록된 데이터를 쓰게된다.

defaultValue가 createContext 함수에 인자로 패스되지 않는다면 Child2는 CardContext를 통해 접근할 수 있는 데이터가 없게 된다.