리액트 훅 - 유즈콘텍스트 (글로벌 스테이트)

유즈콘텍스트는 리액트의 훅 중 하나로 유즈스테이트와 같이 애플리케이션의 상태를 관리하는 기능을 제공합니다. 다른 점은 연결된 컴포넌트 사이에서만 데이터를 주고받을 수 있는 유즈스테이트와 달리 어느 컴포넌트에서든 콘텍스트에 설정된 데이터에 대한 접근이 가능하여 글로벌 스테이트 관리에 용이합니다. 

목차

• 프로젝트 구성하기
  • 리액트 앱 생성
  • 데이터 파일 생성
  • 컴포넌트 구성
• 콘텍스트 설정하기
  • 콘텍스트 생성
  • 콘텍스트 프로바이더 추가
• 콘텍스트 사용하기
  • 유즈스테이트
    • ▶ 유즈스테이트 추가하기
    • ▶ 데이터 접근하기
    • ▶ 데이터 사용하기 (예시)
  • 유즈리듀서
    • ▶ 유즈리듀서 추가하기
    • ▶ 데이터 접근하기
    • ▶ 데이터 사용하기 (예시)

프로젝트 구성하기

리액트 앱 생성

리액트?

데이터 파일 생성

테스트를 위해 폴더를 생성하고 데이터를 추가합니다

const InventoryData = [
  {
    id: 1,
    name: 'item 1',
    quantity: 1,
  },
  {
    id: 2,
    name: 'item 2',
    quantity: 2,
  },
  {
    id: 3,
    name: 'item 3',
    quantity: 3,
  },
  {
    id: 4,
    name: 'item 4',
    quantity: 4,
  },
]

export default InventoryData

컴포넌트 구성

예시를 위해 아래와 같이 컴포넌트를 구성하겠습니다

콘텍스트 설정하기

콘텍스트 생성

콘텍스트를 담을 폴더를 만들고 파일을 추가합니다

콘텍스트 파일은 콘텍스트와 해당 콘텍스트를 제공하는 프로바이더로 구성됩니다

import { createContext } from 'react'

const InventoryContext = createContext()

export const InventoryProvider = ({ children }) => {
  return (
    <InventoryContext.Provider value={{

    }}>
      {children}
    </InventoryContext.Provider>
  )
}

export default InventoryContext

콘텍스트 프로바이더 추가

App.js로 이동하여 프로바이더를 가져온 뒤 컴포넌트 최상단에 추가합니다

콘텍스트 사용하기

콘텍스트는 콘텍스트 파일에 콘텍스트와 프로바이더를 생성하고 생성한 콘텍스트를 콘텍스트는 데이터의 상태를 지속하는 다른 훅과 함께 사용합니다.

유즈스테이트

▶ 유즈스테이트 추가하기

먼저, 유즈스테이트와 같이 사용하는 방법을 보겠습니다. 콘텍스트 파일에 유즈스테이트와 데이터파일을 추가하고 유즈스테이트를 초기화합니다.

 

생성한 함수나 값은 콘텍스트 프로바이더 태그의 value 속성에 값으로 제공하면 다른 컴포넌트에서 사용이 가능합니다.

import { createContext, useState } from 'react'
import InventoryData from '../data/InventoryData'

const InventoryContext = createContext()

export const InventoryProvider = ({ children }) => {
  const [inventory, setInventory] = useState(InventoryData)
  return (
    <InventoryContext.Provider value={{
      inventory
    }}>
      {children}
    </InventoryContext.Provider>
  )
}

export default InventoryContext

▶ 데이터 접근하기

콘텍스트를 사용하고자 하는 컴포넌트로 이동하여 유즈콘텍스트 훅을 가져오고 사용할 콘텍스트의 함수 또는 값을 객체의 형태로 초기화합니다

▶ 데이터 사용하기 (예시)

해당 데이터를 활용해서 리스트를 만들어 보겠습니다. 

유즈리듀서

다음으로, 유즈리듀서와 같이 사용하는 방법을 보겠습니다.

▶ 유즈리듀서 추가하기

리듀서 함수를 생성할 파일을 만듭니다.

콘텍스트 파일에 유즈리듀서와 데이터파일을 추가하고 유즈리듀서를 초기화합니다.

 

생성한 디스패치와 스테이트는 콘텍스트 프로바이더 태그의 value 속성에 값으로 제공합니다.

import { createContext, useReducer } from 'react'
import InventoryData from '../data/InventoryData'
import { InventoryReducer } from './InventoryReducer'

const InventoryContext = createContext()

export const InventoryProvider = ({ children }) => {
  const initialState = {
    inventory: InventoryData
  }

  const [state, dispatch] = useReducer(InventoryReducer, initialState)

  return (
    <InventoryContext.Provider value={{
      ...state
    }}>
      {children}
    </InventoryContext.Provider>
  )
}

export default InventoryContext

---

※ 스테이트는 아래와 같이 전달도 가능합니다.

---

▶ 데이터 접근하기

콘텍스트를 사용하고자 하는 컴포넌트로 이동하여 유즈콘텍스트 훅을 가져오고 사용할 콘텍스트의 함수 또는 값을 객체의 형태로 초기화합니다

▶ 데이터 사용하기 (예시)

해당 데이터를 활용해서 리스트를 만들어 보겠습니다. 

이상으로 리액트 유즈콘텍스트 훅을 사용하는 방법을 보았습니다.

---

참고

 

Traversy Media - YouTube

Traversy Media