Context API를 사용할 때 초기값이 필요한 이유

💡 React Context는 Provider 외부에서 접근할 때 기본값이 필요하기 때문이다.

React Context에서 "Provider 외부"란 Context.Provider 컴포넌트로 감싸지지 않은 영역을 의미한다.

---

🤔 상황 설명

• React Context API를 사용하면, Context.Provider를 통해 데이터를 하위 컴포넌트에 전달한다.
• 하지만 하위 컴포넌트가 Provider 내부가 아닌 외부에서 useContext로 Context를 접근하려고 할 때, 기본값이 없으면 에러가 발생하거나 undefined가 반환된다.

🤔 예시 코드

Provider 내부와 외부의 차이

import React, { createContext, useContext } from 'react';

const MyContext = createContext({ value: 'default' });

function ComponentUsingContext() {
  const context = useContext(MyContext);
  return <div>{context.value}</div>;
}

function App() {
  return (
    <>
      {/* Provider 외부 */}
      <ComponentUsingContext />
      
      {/* Provider 내부 */}
      <MyContext.Provider value={{ value: 'provided' }}>
        <ComponentUsingContext/>
      <MyContext.Provider>
    </>
  );
}

• Provider 외부
  • ComponentUsingContext가 MyContext.Provider로 감싸져 있지 않다.
  • 이 경우, useContext(MyContext)가 기본값 { value: 'default' }를 사용한다.

• Provider 내부
  • ComponentUsingContext가 MyContext.Provider로 감싸져 있다.
  • 이 경우, value={{ value: 'provided' }} 값이 전달된다.

🤔 기본값의 필요성

createContext를 사용할 때 기본값(초기값)을 제공하지 않으면, Provider 외부에서 useContext를 호출할 때 에러가 발생하거나 undefined를 반환할 수 있다.

초기값이 없는 경우

const MyContext = createContext(); // 기본값 없음

function ComponentUsingContext() {
  const context = useContext(MyContext); // 여기서 에러 발생 가능
  return <div>{context.value}</div>;
}

• createContext()에서 기본값이 없기 때문에, Provider 외부에서 접근 시 에러가 발생한다.
• 이는 React가 context의 값이 undefined라는 점을 처리할 수 없기 때문이다.

🤔 Provider 외부에서도 안전하게 동작하려면?

기본값을 설정하면, Provider 외부에서 접근하더라도 에러 없이 동작한다.

기본값 설정 예시

const MyContext = createContext({ value: 'default' });

function ComponentUsingContext() {
  const context = useContext(MyContext); // 기본값 사용
  return <div>{context.value}</div>;
}

• Provider 외부에서 useContext를 호출하면 { value: 'default' }를 사용하게 된다.
• 이는 Provider 외부에서도 에러 없이 안전하게 동작하도록 보장한다.

🤔 결론

Provider 외부란 Context.Provider로 감싸지지 않은 영역을 뜻하며, 초기값을 설정하는 이유는

1. Provider 외부에서의 안전성: 초기값을 제공하면 Provider로 감싸지 않은 상태에서 접근해도 에러가 발생하지 않는다.
2. 디폴트 동작 정의: 초기값은 Provider가 없을 때 동작을 정의하는 역할을 한다. (예: 기본 함수나 상태)

이를 통해 Provider 외부에서도 Context를 사용하는 컴포넌트가 에러 없이 동작할 수 있다.