글로벌 상태가 필요합니까?

전역 상태가 절대적인 악몽이라는 것은 비밀이 아닙니다. React에서만이 아닙니다. 이 게시물에서는 Context API를 사용하는 방법을 보여주고 Redux 설정의 골칫거리를 덜어줄 것입니다.

컨텍스트 API

React의 Context API는 제대로 언급되지 않았기 때문에 신입 개발자가 간과하는 경우가 많습니다. 즉, 값에 대한 중첩된 액세스를 위한 유틸리티를 제공합니다.

일부 상태를 가지고 여러 구성 요소 계층을 통해 전달한 적이 있습니까? 이것은 Prop Drilling이라고 불리며 정당한 이유로 어색하게 느껴집니다. 비효율적이고 리팩토링하기 정말 어렵습니다! 컨텍스트가 이 문제를 해결합니다.

컨텍스트 설정

사용자에 대한 정보를 표시하기 위해 대시보드 페이지를 구축한다고 상상해 보십시오. 해당 데이터를 소비하는 데 필요한 여러 구성 요소가 있을 수 있습니다.
UserContext.ts라는 파일을 만듭니다.

import { createContext } from 'React'

const UserContext = createContext<User | null>(null)

export default UserContext

구성 요소 트리에 컨텍스트 제공

대시보드의 최상위 레벨에서 컨텍스트 제공자를 사용하십시오.

import UserContext from './UserContext'

function Dashboard() {
  const user: User = {
    name: "Tom",
    email: "[email protected]"
  }

  return (
    <UserContext.Provider value={user}>
       ...
    </UserContext.Provider>
  )
}

export default Dashboard

컨텍스트 소비

컨텍스트에 액세스하는 것은 React의 내장 후크 중 하나에 전달하는 것만큼 간단합니다.

import { useContext } from 'react'
import UserContext from './UserContext'

function DisplayUser() {
  const user = useContext(UserContext)

  if (user === null) throw new Error("...")

  return (<div>{user.name}</div>)
}

정말 간단합니다. React를 사용하는 여정에서 너무 늦게 발견한 것입니다.

컨텍스트를 사용하지 않는 경우

Context는 소품 드릴링을 제거하는 데 적합하지만 Redux에 도달할 수 있는 시나리오가 분명히 있습니다.

복잡한 데이터

데이터가 거대한 중첩 개체인 경우 전역 상태 라이브러리를 반드시 권장합니다. 예를 들어 Redux는 데이터를 관리 가능한 "슬라이스"로 분할하는 데 도움이 되며 원하는 대로 데이터를 가져오고 변경하는 작업을 정의할 수 있습니다.

서버 동기화 데이터

웹 앱 개발에 대한 훨씬 더 지속 가능한 접근 방식은 모든 데이터를 서버 측에 저장하고 프런트엔드에서 이를 반영하도록 하는 것입니다. 이렇게 하면 프런트엔드에서 전역 상태가 완전히 제거되고 백엔드가 단일 정보 소스이므로 데이터 저장 문제를 방지할 수 있습니다. Tanstack Query(이전의 React Query)는 단연 최고이자 가장 인기 있는 솔루션입니다. 적극 추천합니다!

결론

결론적으로 이 기사의 목적은 React와 그 생태계를 이해하는 것이 아키텍처 결정을 내리는 데 어떻게 도움이 되는지 이해하는 데 도움을 주는 것입니다. 너무 자주 사람들은 컨텍스트를 통해 완벽하게 달성할 수 있었던 기능을 위해 Redux와 같은 라이브러리를 설정(번들 크기를 늘림!)하는 데 몇 시간을 소비합니다.