컨텍스트 API로 어려움을 겪고 있습니까? 당신은 혼자가 아닙니다.

상태는 React 애플리케이션의 필수 부분이므로 다른 구성 요소로 전달해야 합니다. 상태/데이터는 props를 통해 하향식(부모에서 자식으로) 전달됩니다. 이를 PROP 드릴링이라고 합니다.


이 방법은 응용 프로그램이 커지고 많은 구성 요소가 서로 다른 소품을 필요로 함에 따라 복잡해집니다.
눈 깜짝할 사이에 상황이 엉망이 될 수 있습니다.

컨텍스트는 트리의 모든 수준을 통해 소품을 전달하지 않고도 구성 요소 간에 이와 같은 값을 공유하는 방법을 제공합니다.

이 가이드에서는 컨텍스트 API와 그 사용법에 대해 이야기하고 이를 사용하여 미니 프로젝트(검색 애플리케이션)를 빌드합니다.
다이빙하자.

컨텍스트는 현재 인증된 사용자, 테마 등과 같은 React 구성 요소 트리에 대해 전역으로 간주될 수 있는 데이터를 공유하도록 설계되었습니다.

귀하의 편집기가 이미 설정되어 있다고 생각합니다.

컨텍스트 API 설정

먼저 ResultContext.js라는 파일을 만들고(원하는 대로 자유롭게 이름 지정) 필요한 후크를 가져와야 합니다.
import React , { useContext , useState , createContext } from "react"

컨텍스트 만들기

const ResultContext = createContext()

"제공자"를 생성하고 {children}을 소품으로 추가

export const ResultContextProvider = ( {children }) => {
//state for results
const [results , setResults ] = useState([]);
//state for search Term
const [searchTerm , setSearchTerm ] = useState('Elon Musk');

//create a function to fetch data

const getResults = async () => {
    const options = {
        method: 'GET',
        headers: {
            'X-API-Key': process.env.REACT_APP_API_KEY,
        }
    };

    const response = await fetch('https://google
search3.p.rapidapi.com/api/v1/search', options)

    const data = await response.json();
    //set results to the results gotten from data fetched
    setResults(data.results)
}

이전에 생성한 Provider 내부의 Context.Provider를 반환하고 전달할 props에 값을 설정합니다.

return (
    <ResultContext.Provider value= { { getResults , results , searchTerm , setSearchTerm } } >
        {children}
    </ResultContext.Provider>
)
}

컨텍스트 파일 설정이 완료되었습니다. 요약해서 말하자면:

createContext() 후크를 사용하여 컨텍스트를 생성했습니다.

우리는 "provider"를 생성하고 {children}을 prop으로 전달하고 ResultContext.Provider를 반환합니다.

데이터를 가져오고 결과 상태를 가져온 데이터로 설정했습니다.

우리는 ResultContext.Provider를 반환하고 값을 다른 구성 요소에 소품으로 전달하려는 상태로 설정했습니다. value prop에 전달하는 모든 것은 앱 전체에서 사용할 수 있습니다.

공급자로 앱 구성 요소 래핑

import React from 'react';
import App from './App';
import { ResultContextProvider } from
'./context/ResultContextProvider';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);

//wrap <App /> with Provider to make state available through app
root.render(
     <ResultContextProvider>
          <Router>
               <App />
          </Router>
     </ResultContextProvider>
);

소품을 소비

이제 앱 전체에서 state/Props를 사용할 수 있으므로 이제 이를 소비해야 합니다.

필요한 후크 가져오기import React, { useEffect, useContext } from 'react'useContext 후크는 컨텍스트에서 소품을 가져오는 데 사용됩니다.

컨텍스트 가져오기import { ResultContext } from '../context/ResultContext'

useContext를 사용하여 컨텍스트에서 소품 가져오기

//component for search
import React, { useEffect, useState, useContext } from 'react';
import { ResultContext } from '../context/ResultContext';

const Search = () => {
  //get prop from context
  const { setSearchTerm } = useContext(ResultContext);
  const [text, setText] = useState('');

  //change the value of text throughout our app
  useEffect(() => {
    if (text) {
      setSearchTerm(text)
    }
  }, [text]);

  return (
    <div>
    <div>
      <input
        value={text}
        type="text"
        onChange={(e) => setText(e.target.value)}
      />  

    {text !== '' && (
      <button type="button" onClick={() => setText('')}>x</button>
    )}
    </div>
  )
}

export default Search;

//component displaying result
import React, { useEffect, useContext } from 'react'
import { useResultContext } from '../context/ResultContext';


const News = () => {
  const { results, getResults, searchTerm } =  useContext(ResultContext);

  useEffect(() => {
    if (searchTerm !== '') {
      getResults();
  }
}, [searchTerm]);


return (
  <div>
  {results?.map(({ link, title, description }, index) => (
  <div key={index}>
    <a href={link} target="_blank" rel="noreferrer">
      <p>{link.length > 30 ? link.substring(0, 30) : link}</p>
      <p >{title}</p>
      <p>{description}</p>
    </a>
  </div>
  ))} 
  </div>
)
}
export default News

결론

이 기사의 주요 내용은 다음과 같습니다.
React Context API는 소품 드릴링을 위해 설계되었습니다.

이 예제는 매우 간단하며 컨텍스트 API를 사용하여 React에서 State를 처리하는 방법을 이해할 수 있기를 바랍니다.