React.js의 useContext 소개

내가 결코 좋아하지 않는 React의 측면은 구성 요소 간에 상태 값을 전송하고 상태 값을 제공하고 업데이트하기 위해 props를 전달해야 한다는 것입니다. useContext 후크를 사용하면 전역적으로 상태를 관리할 수 있으므로 이 프로세스가 약간 더 쉬워질 수 있으며 특히 중첩된 구성 요소의 경우 소품을 전달할 필요 없이 더 쉽게 시간을 보낼 수 있습니다.

시작하는 방법

이 후크를 사용하는 가장 일반적인 접근 방식은 컨텍스트(전역 상태 값)를 초기화하고 구성 요소에 값을 전달할 수 있는 기능을 부여하는 것입니다. UserContext를 변수로 초기화하는 이 첫 번째 단계는 모두 CreateContext.js라는 자체 파일 내에서 수행됩니다.

import { createContext } from "react";

export const UserContext = createContext();

이것은 해당 파일의 모든 필수 코드입니다. 이제 페이지로 이동할 수 있습니다. 제 경우에는 제 App.js가 다음과 같이 구성되어 있습니다.

function App() {
  return (
    <Router>
      <div className="page">
        <div>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/results/">Results</Link>
          </li>
        </div>
        <Routes>
            <Route exact path="/" element={
            <Home />
            }/>
            <Route path="/results" element={
            <Results />
            }/>
        </Routes>
      </div>
    </Router>
  );
}

우리가 보고 있는 것은 다음과 같습니다.

집



결과



내 간단한 예의 경우 아이디어는 입력 상자에서 입력을 생성하고 전역 상태 값으로 설정한 다음 결과 페이지에서 액세스하는 것입니다. 다음은 해당 값을 초기화한 다음 해당 정보에 액세스하려는 구성 요소를 래핑하는 방법입니다.

import React, { useState } from 'react';
import Home from './Home';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Results from './Results';
import { UserContext } from './CreateContext';

function App() {
  const [value, setValue] = useState("default")

  return (
    <Router>
      <div className="page">
        <div>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/results/">Results</Link>
          </li>
        </div>
        <UserContext.Provider value={{ value, setValue }}>
          <Routes>
              <Route exact path="/" element={
                <Home />
              }/>
              <Route path="/results" element={
                <Results />
              }/>
          </Routes>
        </UserContext.Provider>
      </div>
    </Router>
  );
}

우리는 애플리케이션의 최고 수준에 있으며 정보에 액세스할 수 있는 가장 높은 위치에 있습니다. 변수 "value"로 설정된 전역 상태에 값을 전달했습니다. 이는 "기본값"으로 초기화되었음을 의미합니다.

이제 해당 값에 액세스하려면 다음과 같이 할 수 있습니다.

import { useContext } from "react";
import { UserContext } from './CreateContext';

export default function Results(){
    const { value } = useContext(UserContext)

    return(
        <div>
            <p>Results: {value}</p>
        </div>
    )
}

이것은 결과 페이지이며 useContext 함수를 사용하여 "UserContext"에서 값을 가져온 다음 표시합니다.



이제 이 값을 업데이트하기 위해 홈 페이지로 이동하여 동일한 전역 상태 값인 "default"로 설정된 입력 필드를 변경할 수 있습니다.



그 가치를 얻는 방법은 다음과 같습니다.

import { useContext } from "react";
import { UserContext } from './CreateContext';

export default function Home(){
    const { value, setValue } = useContext(UserContext);

    return(
        <div>
            <p>Enter a value: </p>
            <input
                type="text"
                placeholder="enter value..."
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
        </div>
    )
}

setter 기능을 활용하는 onChange와 함께 이 기능으로 업데이트할 수도 있습니다. 보다시피 이 단계는 useState와 거의 동일해 보입니다. 우리는 후크 함수를 사용하여 값을 가져오고 저장된 것을 사용하고 setter 함수에 새 값을 전달하여 설정할 수 있도록 구조를 해제합니다.