React hooks란?

React 16.8에서 추가된 새로운 기능입니다.
클래스를 작성하지 않고도 state와 같은 React 기능을 함수 구성 요소에서 간단하게 처리 할 수 ​​있습니다.

React hooks를 기초에서 이해 (useState 편)

React hooks를 기초로부터 이해한다(useEffect편)

React hooks 기초부터 이해 (useContext 편) 지금 여기

React hooks를 기초로부터 이해한다(useReducer편)

React hooks를 기초로부터 이해한다(useCallback편)

React hooks를 기초에서 이해 (useMemo편)

React hooks를 기초에서 이해 (useRef편)

useContext란?

Context란?

React 컴포넌트의 트리에 대해 "글로벌"로 간주되는 데이터에 대해 사용하도록 설계되었습니다.
컴퍼넌트의 재이용을 보다 어렵게 하기 위해, 신중하게 이용하지 않으면 안됩니다.
Context 구성 요소 트리 간의 데이터 브리징에 대한 모든 계층 구조에 대한 전달이 필요하지 않으므로 props 버킷 릴레이를 사용하지 않고 아래 계층 구조에서 Context에 포함 된 데이터에 액세스 할 수 있습니다. 되었습니다.

참고: React 공식 사이트 컨텍스트

useContext란?

useContext는 Context 기능을보다 간단하게 사용할 수있게 된 기능입니다.
부모로부터 Props로 전달되지 않았지만 Context에 포함 된 데이터에 더 간단하게 액세스 할 수 있습니다.

간단한 샘플을 만들어 보자.

계층은 이런 느낌


【ContextA.jsx】
ContextB를 가져옵니다.

react.js

import React from 'react'
import ContextB from './ContextB'

const ContextA = () => <ContextB/>

export default ContextA

【ContextB.jsx】
ContextC를 가져옵니다.

react.js

import React from 'react'
import ContextC from './ContextC'

const ContextB = () => <ContextC/>

export default ContextB

【ContextC.jsx】
앱 가져오기

react.js

//ReactからuseContextをimport
import React, {useContext} from 'react'
//AppコンポーネントからUserContext, HobbyContextをimport
import {UserContext, HobbyContext} from '../../App'

const ContextC = () => {
//useContextの引数に、UserContextやHobbyContextを渡すことによって、
//AppコンポーネントでProviderに渡したvalueの値を変数に代入することが出来る
  const user = useContext(UserContext)
  const hobby = useContext(HobbyContext)
  return (
    <p>{user.name}{user.age}歳: 趣味は{hobby}です。</p>
  )
}

export default ContextC

【App.js】
ContextA를 가져옵니다.

react.js

// ReactからcreateContextとuseStateをimport
import React, {createContext, useState} from 'react'
import './App.css';
import Context from './components/ContextSample/ContextA'

//createContextを使ってUserContextとHobbyContextを作成
export const UserContext = createContext()
export const HobbyContext = createContext()

function App() {
//useStateを使ってuserを作成
  const [user, setUser] = useState({
    name: 'セイラ',
    age: '17'
  })
//useStateを使ってhobbyを作成
  const [hobby, setHobby] = useState('キャンプ')
  return (
    <div className='App'>
//userContext。Providerを作成、valueにはuserをセット
      <UserContext.Provider value={user}>
//HobbyContext.Providerを作成、valueにはhobbyをセット
        <HobbyContext.Provider value={hobby}>
          <Context/>
        </HobbyContext.Provider>
      </UserContext.Provider>
    </div>
  )
}

export default App

React.createContext에서 반환 값을 받고 해당 컨텍스트의 현재 값을 반환합니다.React.createContext 의 현재치는, 트리내에서 이 훅을 불렀던 컴퍼넌트의 근처에 있는 <Context.Provider> 의 value 의 값에 의해 정해집니다.
useContext를 호출하는 구성 요소는 컨텍스트 값이 변경될 때마다 매번 다시 렌더링됩니다.

덧붙여서 ContextC.jsx를 useContext를 사용하지 않고 쓰면 이하.Consumer를 사용하여 Provider를 읽는 중입니다.

javascript.js

import React from 'react'
import {UserContext, HobbyContext} from '../../App'

const ContextC = () => {

  return (
    <>
      <UserContext.Consumer>
        {
          user => {
            return (
              <HobbyContext.Consumer>
                { hobby => <p>{user.name}({user.age}歳): 趣味：{hobby}</p> }
              </HobbyContext.Consumer>
            )
          }
        }
      </UserContext.Consumer>
    </>
  )
}

export default ContextC

useContext를 사용하면 상당히 간단하게 쓸 수 있음을 알 수 있습니다

표시는 이대로


이와 같이 useContext를 사용하는 것으로, Context를 보다 간단하게 알기 쉽게 쓸 수 있었습니다

마지막으로

다음에 useReducer에 대해 쓰고 싶습니다.

참고로 한 사이트