React 컨텍스트 소개

React Context API은 React v.16.3부터 도입된 기능으로, 이 기능은 React 개발자로서 구성 요소 트리를 통해 데이터를 전달할 수 있는 강력한 기능을 제공하며, 이는 많은 시나리오에서 정말 유용할 수 있습니다. ✨

React Context를 사용하는 방법에 대해 알아보기 전에 먼저 이 기능이 처음에 생성된 이유에 대해 알아보겠습니다. React 애플리케이션은 일반적으로 상위 및 하위 관계가 있는 여러 구성 요소로 구성됩니다. 즉, "props"를 사용하여 부모 구성 요소의 데이터가 자식 구성 요소로 전달됩니다.

Unidirectional data flow is one of main concept of react, in nutshell changing state on a component will never affect its parent or its siblings, only the children will be affected.

이 패턴을 사용하면 코드를 더 쉽게 디버깅할 수 있고 오류가 덜 발생하므로 코드에 대한 확신을 가질 수 있습니다. 그러나 구성 요소 간에 공유해야 하는 하위 구성 요소의 데이터가 있는 경우 상태는 가장 가까운 상위 구성 요소에 있어야 합니다lifted up.

그러나 큰 응용 프로그램에서는 매우 빠르게 지저분해질 수 있습니다. 일부 API를 호출하기 위해 깊게 중첩된 구성 요소에 사용자 토큰을 전달해야 한다고 상상해 보십시오.

const { useState, useEffect } from 'react';
const { getToken, getData } from './API/auth';

const App = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const userAuth = async () => {
      const _token = await getToken();
      setToken(_token)
    }
  }, [])

  return <Dashboard token={token} />
}

const Dashboard = ({token}) => {
  return (
    <div>
      <h1>My Dashboard</h1>
      <UserSummary token={token} />
    </div>
  )
}

const UserSummary = ({token}) => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async (t) => {
      const _userData = await getData(t);
      setUserData(_userData);
    }

    if (token) fetchUserData(token)
  }, [token])

  return(
    {
      !userData ? <h1>Loading...</h1> : <h1>{JSON.stringify(userData, null, 2)}</h1>
    }
  );
}

위의 고안된 코드를 살펴보겠습니다. UserSummary 사용자 데이터를 가져오려면 구성 요소에 토큰이 필요합니다. 그러나 이를 위해서는 App 구성 요소에서 생성된 토큰이 필요합니다. 토큰을 소품으로 Dashboard에 전달한 다음 다시 UserSummary 구성 요소에 전달합니다.

위의 예에서 우리는 Dashboard 구성 요소가 실제로 token prop을 필요로 하지 않는다는 것을 알고 있습니다. 그러나 UserSummary는 Dashboard 구성 요소의 자식이므로 token를 통해 Dashboard를 전달해야 합니다. 중첩된 구성 요소의 수준이 1~2개만 있으면 괜찮아 보일 수 있습니다. 그러나 실제 시나리오에서는 필요할 수 있는 앱의 많은 구성 요소에 대해 token가 필요할 수 있습니다. 모든 장소에 token 소품을 전달할 예정입니까? 이 문제는 소품 드릴링으로 알려져 있습니다 🛠

컨텍스트를 구조에 반응

React Context를 사용하면 각 수준에서 수동으로 소품을 전달하지 않고도 부모 구성 요소에서 자식 구성 요소로 구성 요소 트리를 통해 데이터를 전달할 수 있습니다.

React Context를 사용하는 방법에는 네 가지 단계가 있습니다.

createContext()를 사용하여 컨텍스트를 만듭니다.

이전에 생성된 컨텍스트에서 컨텍스트 공급자를 사용하여 구성 요소를 래핑합니다.

컨텍스트 공급자의 value 속성을 사용하여 기본값을 설정합니다.

useContext 후크를 사용하여 컨텍스트 값을 가져옵니다.

위의 예제를 React Context를 사용하도록 변환해 봅시다.

const { useState, useEffect, createContext, useContext } from 'react';
const { getToken, getData } from './API/auth';

export const TokenContext = React.createContext();

const App = () => {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const userAuth = async () => {
      const _token = await getToken();
      setToken(_token)
    }
  }, [])

  return (
    <TokenContext.Provider value={token}>
      <Dashboard />
    </TokenContext.Provider>
  )
}

const Dashboard = ({token}) => {
  return (
    <div>
      <h1>My Dashboard</h1>
      <UserSummary />
    </div>
  )
}

const UserSummary = ({token}) => {
  const value = React.useContext(TokenContext);
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchUserData = async (t) => {
      const _userData = await getData(t);
      setUserData(_userData);
    }

    if (token) fetchUserData(token)
  }, [token])

  return(
    {
      !userData ? <h1>Loading...</h1> : <h1>{JSON.stringify(userData, null, 2)}</h1>
    }
  );
}

위의 예에서 새 컨텍스트를 만들고 TokenContext 변수로 저장합니다. App 에서 Provider 를 사용하여 TokenContext 구성 요소를 래핑하고 초기 값을 제공합니다. 우리의 경우는 token 입니다. 마지막으로 useContext() 후크를 사용하여 token 구성 요소에서 컨텍스트 값(UserSummary)을 얻습니다.

React Context를 사용하면 코드가 훨씬 더 간결해집니다. 또한 소품 드릴링 문제를 제거합니다. React 컨텍스트 외에도 전역 상태 관리인 Redux 또는 MobX과 같은 다른 옵션을 사용할 수 있습니다.

일반적으로 전역적으로 관리해야 하는 상태의 양이 많지 않고 상태가 자주 업데이트되지 않는 경우 Redux 대신 React Context를 사용해야 합니다. 그러나 많은 양의 상태를 관리하고 자주 업데이트하는 경우 Redux 사용을 고려할 수 있습니다.

이 짧은 기사가 React를 배우는 여정에 도움이 되기를 바랍니다 🍻