[React] useContext

useContext란?

context api라고 하며 특정한 값을 모든 컴포넌트에서 사용할 수 있도록 해주는 훅이다.

예를 들면, state 값을 등록하면 어디서든 쉽게 접근하여 사용할 수 있게된다.
props를 깊게 전달해야하는 경우 이 훅을 사용하면 유용하다.

생성

사용법은 먼저 context 객체를 생성한다.

const UserContext = createContext(초기값)

전달

생성한 컨텍스트.Provider 로 특정 컴포넌트를 감싸주면 value 부분에 명시한 값을 어떤 하위 컴포넌트에서든지 사용할 수 있게된다.

import React, { createContext, useState } from 'react'
import UserList from './components/UserList'

export const UserContext = createContext(null)

function App() {
  const [count, setCount] = useState(1)

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

export default App

사용

//   value에 넘겨준 값         컨텍스트 객체
const { count } = useContext(UserContext)

이렇게 전달되는 state는 하위 컴포넌트들에서 공유되기 때문에 한 곳에서 state를 바꾸면 이 state를 사용하는 모든 컴포넌트에 영향을 끼쳐 해당 컴포넌트의 state 또한 변경된다.

그리고 위에서 context를 같은 파일에 작성했지만 보통은 contexts 폴더를 따로 만들어 여기서 context 파일을 관리한다.

import React, { createContext, useState } from 'react'

export const UserContext = createContext(null)

function UserProvider({ children }) {
  const [name, setName] = useState('Lee')

  return <UserContext.Provider value={name}>{children}</UserContext.Provider>
}

export default UserProvider

import React, { createContext, useState } from 'react'
import UserInfo from './components/UserInfo'
import UserList from './components/UserList'
import { UserProvider } from './contexts/UserContext'

function App() {
  return (
    <UserProvider>
      <UserList />
      <UserInfo />
    </UserProvider>
  )
}

export default App