[07-React] 6-5. React Hook :: useContext

5. useContext

수직적 전달 ❘ 수평적 전달

: React의 Context API와 함께 사용

: 여러 컴포넌트에서 전역 상태를 공유 -> props drlling(props의 수직적인 전달) 회피 가능

---

5.1 Context

: props drlling을 극복하기 위한 개념
: 명시적인 props 전달 없이 하위 컴포넌트에서 사용 가능

---

5.2 Context API의 구성 및 사용 방법

- Context :: 전역 상태가 저장
- Provider :: 전역 상태를 제공, 어디까지 수평적 전달을 할지 제한, 사용할 범위를 감싸고 있어야 함
- Consumer :: 전역 상태를 사용-접근

 

• 3개의 절차
  1. Create :: createContext - DefaultValue 설정 (Provider 외부에서도 사용 가능 값)
  2. Provider :: CreatedContext.Provider - InitialValue 설정 (Provider 내부에서만 사용 가능 값)
  3. Consumer :: Provider 내부 중 Consumer 에서 전역 상태 사용
     3-1) Context.Consumer
            :: Consumer 내에 컴포넌트가 아닌 컴포넌트 생성 함수를 children 으로 받는다.
     

     <Context.Consumer>{(state) ⇒ {…}}</Context.Consumer>
     // “전역 상태 State” 변경에 따른 리렌더 발생 시 <Context.Consumer> 내부만 리렌더

     
     3-2)  useContext
             :: Consumer 내에 컴포넌트가 아닌 컴포넌트 생성 함수를 children 으로 받는다.
     

     React.useContext(CreatedContext)
     // “전역 상태 State” 변경에 따른 리렌더 발생 시 해당 useContext 가진 컴포넌트 모두 리렌더

      
• 유의점
  : 상태는 context안에 존재하여야 업데이트 시, 상관없는 것에 대한 리렌더링을 방지
  : Provider의 범위와 상태 설정에 유의

출처 : ASAC 수업자료

- Ex)

import { createContext, useContext, useState } from 'react'
import './App.css'

function F4C() {
  console.log('4')
  return <>Count is</>
}
// 방법 1
// function TC() {
//   console.log('3')
//   const count = useContext(CreatedContext)
//   return (
//     <>
//       <div>Count is {count}</div>
//       <F4C />
//     </>
//   )
// }

// 방법 2
function TC() {
  console.log('3')
  return (
    <>
      <div>
        <CreatedContext.Consumer>
          {(item) => {
            return <div>Count is {item}</div>
          }}
        </CreatedContext.Consumer>
      </div>
      <F4C />
    </>
  )
}

function SC() {
  console.log('2')

  return <TC />
}

function FC() {
  console.log('1')
  return <SC />
}

function NonContextComponent() {
  const count = useContext(CreatedContext)
  console.log('non')
  return <div>Count is {count}</div>
}

const CreatedContext = createContext(-10) // default value
const CreatedContextProvider = ({ children }) => {
  const [count, setCount] = useState(0)

  return (
    <CreatedContext.Provider value={count}>
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
      {children}
    </CreatedContext.Provider>
  )
}

function App() {
  return (
    <>
      <h1>Vite + React</h1>
      <div className='card'>
        <CreatedContextProvider>
          <div className='in-provide'>
            <FC />
          </div>
        </CreatedContextProvider>
        <div className='outside-provide'>
          <NonContextComponent />
        </div>
      </div>
    </>
  )
}

export default App

---

참조

ASAC 수업자료