React-useContext 갈고리와 React-context 사용하기 시작

React context는 전역적으로 접근할 수 있는 데이터와 상태를 쉽게 만들 수 있습니다.useContext 갈고리는 React 상하문을 어디서든 사용하고 응용 프로그램에서 데이터를 전달할 수 있도록 합니다.이 자습서는 새 컨텍스트를 작성하는 방법, 값을 가져오는 방법, 변경하는 방법을 보여 줍니다.<-자세히 -->

환경, 전 세계 국가, 기둥 시추 대응
데이터를 처리할 때, 그것들은 통상적으로 두 가지 유형 중의 하나이며, 전역 또는 국부적이다.어디서든 Global을 방문할 수 있습니다.그것들을 정의하는 곳부터 시작해서 나무를 따라 아래로 내려간다.이것도 각 주에 적용된다.너는 전체적인 상태가 있을 수도 있고 국부적인 상태가 있을 수도 있다.어느 것이 가장 좋은 선택인지는 구체적인 상황에 달려 있다.
전역 상태를 쉽게 만들 수 있도록 React context API를 사용합니다.그럼에도 불구하고 이들 전 세계 국가들은 문제가 하나 있다.그것들은 보통 끼워 넣는 구성 요소에서 사용하기 어렵다.상단에서 데이터를 얻는 데 필요한 위치까지 시간이 많이 걸릴 수 있다prop drilling.여러 개의 구성 요소를 통해 이 데이터를 전달해야 할 수도 있습니다.
이 문제를 해결하는 방법의 하나는 이 데이터를 현지화하는 것이다.그러나 이것은 코드를 중복시킬 것이다.이는 전 세계에서 얻을 수 있는 진실의 근원을 가지고 있다는 생각과도 배치된다.또 다른 해결 방안은 모든 도구의 구멍을 건너뛰고 이 데이터를 필요로 하는 구성 요소에서 상하문에 접근하는 것이다.
이것이 바로 React-useContext 갈고리의 목표이다.이 갈고리는 두 가지 일에 있어서 너를 돕겠다고 약속했다.우선, 당신이 어떤 환경과 어디를 접촉하든지 돕는다.둘째, 이런 환경을 통해 드러난 가치관을 처리한다.이것은 이 값들을 가져오고 변경하는 것을 포함한다.그것이 어떻게 일을 하는지 우리에게 보여 주시오.

배경.
React 컨텍스트를 사용하려면 몇 가지 작업만 수행해야 합니다.우선, 당신은 상하문을 만들어야 합니다.React와 함께 제공되는 createContext() 방법을 사용하여 이 작업을 수행할 수 있습니다.이 컨텍스트는 전체 응용 프로그램에서 사용할 수 있는 전역 상태가 됩니다.적어도 하나는 이렇다. 왜냐하면 당신의 React 프로그램은 무한히 많은 상하문을 포함할 수 있기 때문이다.

// context.jsx

// Import createContext() method from React:
import { createContext } from 'react'

// Create new context:
export const newContext = createContext()

주의, 우리는 상하문 성명을 공백으로 하고 기본적으로 부치undefined입니다.걱정 마.이것은 결코 이 상하문이 영원히 비어 있을 것이라는 것을 의미하지 않는다.그것을 만들 때, 잠시 비어 있습니다.잠시 후 다음 단계에서 값을 추가합니다.또한 컨텍스트를 내보내고 있습니다.
이유는 간단하다.useContext 갈고리는 상하문을 매개 변수로 받아들인다.따라서,useContext 갈고리를 사용하여 프로그램의 어느 곳에서든 상하문에 접근하려면, 상하문 자체도 어느 곳에서든 접근할 수 있어야 한다.이것은 우리가 그것이 있는 곳에서 그것을 수출해야 한다는 것을 의미한다.

컨텍스트 공급자
네가 해야 할 두 번째 일은 새로운 환경을 위한 공급자를 만드는 것이다.이 공급자는 응용 프로그램에 상하문에 저장된 값을 제공하는 구성 요소입니다.공급자는 상하문에 접근할 수 있는 모든 구성 요소를 포장했다.이 점을 기억하는 것이 매우 중요하다.
구성 요소가 공급자의 하위 구성 요소일 때만 공급자와 통신할 수 있습니다.어셈블리 트리의 위치는 중요하지 않습니다.중요한 것은 공급자가 위 나무 중 어느 곳의 포장기로 사용된다는 것이다.일반적으로 공급자는 전체 응용 프로그램의 패키지로 사용된다.
이것은 응용 프로그램의 모든 구성 요소가 공급자와 통신할 수 있도록 보장한다.만약 공급자가 여러 명 있다면, 공급자를 다른 공급자에 포장하고, 응용 프로그램을 마지막 하위 공급자로 삼을 수 있다.이것은 프로그램이 트리의 모든 공급자에 접근할 수 있도록 보장할 것이다.이제 공급자를 만듭니다.

컨텍스트 공급자 작성
공급자를 만드는 것은 일반적인 React 구성 요소를 만드는 것과 유사합니다.현재 공급자는 보통 기능 구성 요소로 만들어집니다.너는 이 구성 요소의 이름을 지었다.공급자로 끝내는 것은 좋은 방법이다.이것은 코드를 읽을 때 더욱 쉽게 이해할 수 있게 한다.
이 구성 요소에서 원하는 react 갈고리를 사용할 수 있습니다.예를 들어 useState hook를 사용하여 프로그램에 새로운 상태를 만들 수 있습니다.그리고 이 상태를 프로그램의 값으로 설정해서 공개할 수 있습니다.이것은 프로그램이 제공하는 모든 구성 요소에 사용할 수 있도록 할 것이다.
useCallback hook를 사용하여 기억 기능을 만들 수 있습니다.이 함수들은 상태를 처리하고 그 값을 업데이트할 수 있다.이 함수들을 프로그램의 값으로 설정해서 공개할 수도 있다.마찬가지로, 이것은 프로그램 포장을 제공하는 구성 요소를 사용할 수 있게 할 것이다.
가장 중요한 부분은 렌더링이 발생하는 위치, 즉 return 문장 뒤의 내용이다.여기에서 상하문을 처음으로 사용할 것입니다.이전에 만들어진 상하문에는 새 공급자가 보여줄 공급자 구성 요소도 포함되어 있습니다.이 공급자 구성 요소에 액세스하려면 객체 점 기호newContext.Provider를 사용합니다.
우리는 이 제공 프로그램을 포장기로 사용하기를 원하기 때문에, 포장의 모든 하위 단계를 보여 주어야 한다.

// context.jsx

// Import createContext() method from React:
import { createContext } from 'react'

// Create new context:
export const newContext = createContext()

// Create new provider component:
export const NewProvider = (props) => {
  return (
    {/* Render Provider provided by previously created context: */}
    <newContext.Provider>
      {/* Render Provider's children: */}
      {props.children}
    </newContext.Provider>
  )
}

필요할 때 사용할 수 있도록 새로운 공급자 구성 요소를 내보내야 합니다.다음 단계는 공급자를 사용하고 구성 요소의 패키지로 사용해서 공급자가 제공하는 데이터에 접근할 수 있도록 합니다.너도 그것으로 메인 응용 프로그램의 구성 요소를 포장할 수 있다.
이것은 프로그램의 모든 구성 요소를 공급자가 공개한 모든 내용에 접근할 수 있게 할 것이다.

// index.jsx

// Import React and React-dom:
import { StrictMode } from 'react'
import ReactDOM from 'react-dom'

// Import the NewProvider component:
import { NewProvider } from './context'

// Import app component:
import App from './App'

// Create the main component:
const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    {/* Use the NewProvider to wrap the whole app: */}
    <NewProvider>
      {/* The app component rendering all other components: */}
      <App />
    </NewProvider>
  </StrictMode>,
  rootElement
)

컨텍스트 제공 프로그램에 상태 추가
공급자 자체가 응용 프로그램에 아무런 가치도 제공하지 않는다면, 그 자체는 무용지물이다.이 문제를 해결하기 위해서 너는 두 가지 일이 필요하다.우선, 당신은 가치, 데이터가 필요합니다. 공급자를 통해 얻고 싶습니다.둘째, 이 데이터를 공급자로부터 접근할 수 있도록 해야 합니다.
첫 번째 문제는 공급자 내부에 새로운 로컬 상태를 만들어서 해결할 수 있습니다.useState 갈고리가 잘 어울릴 거예요.이 상태의 값은 응용 프로그램에서 공유하려는 값입니다.useState 갈고리에서 업데이트 함수를 만들었기 때문에 이 공유 상태를 업데이트하는 방법을 제공합니다.
두 번째 문제를 해결하려면 value 구성 요소에 되돌아오는 myContext.Provider 구성 요소에 NewProvider 속성을 추가해야 합니다.이 속성의 값은 primitive data type에서 대상까지의 모든 값일 수 있습니다.단일한 가치를 공유하고 싶다면, 첫 번째는 충분하다.
만약 여러 개의 값이나 값과 함수를 공유하고 싶다면, 대상을 사용하는 것이 가장 좋다.응용 프로그램에서 값을 제공하는 것은 좋은 일이다.더 좋은 방법은 프로그램에서 이 값을 변경할 수 있도록 하는 것이다.그럼 이 물체를 봅시다.새로운 상태를 만들고 프로그램 제공을 통해 상태와 업데이트 기능을 공개합니다.

// context.jsx

// Import createContext() method and useState hook from React:
import { createContext, useState } from 'react'

// Create new context:
export const newContext = createContext()

// Create new provider component:
export const NewProvider = (props) => {
  // Create local state:
  const [state, setState] = useState('')

  // Prepare values to share:
  const val = {
    state, // The state itself
    setState // The state update function
  }

  return (
    {/* Set "val" as the value for "value" attribute: */}
    <newContext.Provider value={value}>
      {props.children}
    </newContext.Provider>
  )
}

useContext 갈고리를 사용하여 상하문에 접근
너는 거의 완성할 뻔했다.너는 상하문이 있고, 너는 제공자가 있으며, 너는 제공자를 통해 공유할 수 있는 것이 있다.또한 공급업체를 사용하여 응용 프로그램을 포장하고 공급업체의 value 속성을 통해 가치를 공개합니다.현재, 프로그램의 어느 곳에서든state와setState 함수에 접근할 수 있습니다.
이 점을 하려면 너는 단지 두 가지 일만 하면 된다.우선 상하문 연결이다.두 번째는 처음부터 createContext() 방법으로 만든 상하문을 내보냅니다.이 두 가지를 결합하면 state 구성 요소에서 만든 setState 및 NewProvider에 즉시 접근할 수 있습니다.
주 App 구성 요소를 만듭니다.index.jsx 파일에서 이 구성 요소가 공급자의 직접적인 하위 단계 (상하문 공급자 부분 만들기) 임을 보았습니다.이 구성 요소는 매우 간단할 것이다.환영 메시지와 현재 값state의 제목을 표시하고 state 업데이트setState를 통해 입력하는 두 가지 구성 요소를 포함합니다.
당신은 state 상하문에서 setState와 newContext를 동시에 얻을 수 있습니다.이 상하문은 NewProvider 구성 요소에서 제공된다는 것을 기억하십시오.React-useContext 갈고리를 호출하여 newContext 상하문을 매개 변수로 전달하면 이 값을 얻을 수 있습니다.

// Import useContext hook from React:
import { useContext } from 'react'

// Import newContext context:
import { newContext } from './context'

// Create the App component:
export default function App() {
  // Access the state and setState values in newContext:
  const { state, setState } = useContext(newContext)

  return (
    <div>
      {/* Display the value of "state" */}
      <h1>Hello {state}</h1>

      <h2>Change name:</h2>
      {/*
        Use "setState" update function to update the current value
        of "state" with the current value of input:
      */}
      <input type="text" onChange={(e) => setState(e.target.value)} />
    </div>
  )
}

다중 언어 환경
당신의 React 응용 프로그램 중 얼마나 많은 상하문과 공급자가 있는지 기본적으로 제한이 없습니다.모든 공급자를 포장기에 추가하는 것을 기억하면 임의의 공급자를 가질 수 있다.예를 들어, 우리는 이 간단한 예시 프로그램에 추가 전자 우편 상하문을 추가할 수 있다.이것은 새로운 상하문과 공급자 구성 요소가 필요할 것입니다.
우선, 전자 우편을 위한 새로운 상하문을 만듭시다.이것은 거의 네가 이미 가지고 있는 배경의 거울이다.너는 보통 이름만 바꾼다.

// email-context.jsx

// Import createContext() method from React:
import { createContext, useState } from 'react'

// Create new context:
export const emailContext = createContext()

// Create new email provider component:
export const EmailProvider = (props) => {
  // Create local state for email:
  const [email, setEmail] = useState('')

  // Prepare values for sharing:
  const val = {
    email,
    setEmail,
  }

  // Render emailContext.Provider exposing "val" variable:
  return (
    <emailContext.Provider value={val}>
      {/* Render children components: */}
      {props.children}
    </emailContext.Provider>
  )
}

다음은 주 파일에서 전자 우편 상하문을 가져와야 합니다. 주 파일에서 App 루트 요소에 보여야 합니다.여러 공급업체가 있을 때, 그들의 주문은 결코 중요하지 않다.중요한 것은 응용 프로그램이나 공급자로부터 온 데이터의 구성 요소를 사용해서 공급자와 함께 포장하는 것입니다.

import { StrictMode } from 'react'
import ReactDOM from 'react-dom'

import { NewProvider } from './context'

// Import new email provider:
import { EmailProvider } from './email-context'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    {/* Add email provider as another wrapper of the App component: */}
    <EmailProvider>
      <NewProvider>
        <App />
      </NewProvider>
    </EmailProvider>
  </StrictMode>,
  rootElement
)

이제 React use Context 갈고리 emailContext 를 사용하여 프로그램의 임의의 위치 email 와 setEmail 에 접근할 수 있습니다.

import { useContext } from 'react'

import { newContext } from './context'

// Import new email context:
import { emailContext } from './email-context'

export default function App() {
  const { state, setState } = useContext(newContext)

  // Access the email and setEmail values in emailContext:
  const { email, setEmail } = useContext(emailContext)

  return (
    <div>
      {/* Render the value of "email": */}
      <h1>
        Hello {state}, {email}
      </h1>

      <h2>Change name:</h2>
      <input type="text" onChange={(e) => setState(e.target.value)} />

      <h2>Change email:</h2>
      {/*
        Allow to to update the current value of "email"
        via the "setEmail" update function and text input:
      */}
      <input type="text" onChange={(e) => setEmail(e.target.value)} />
    </div>
  )
}

결론:React-useContext 갈고리와 React-context 사용하기 시작
React 컨텍스트가 있는 전역 상태를 작성하는 것은 매우 쉽습니다.React useContext hook의 도움말에서는 이러한 컨텍스트 및 데이터에 대한 액세스도 쉽습니다.이 강좌는 상하문과 공급자를 만드는 방법과 useContext 갈고리를 사용하여 그들과 통신하는 방법을 이해하는 데 도움을 줄 수 있기를 바랍니다.