React에서 컨텍스트를 사용하여 구성 요소 간에 데이터를 공유하는 방법

형제 구성 요소 간에 데이터를 공유하고 싶습니까? 부모 및 자식 구성 요소의 복잡한 계층 간에 정보를 보내고 싶습니까? 자식에서 부모로 상태를 업데이트할 수 있기를 원하십니까?

그렇다면 이 글은 당신을 위한 것입니다. 단계에 따라 두 형제 구성 요소 간에 공유되는 사용자 이메일에 초점을 맞춘 예제를 통해 구성 요소 간에 데이터를 쉽게 공유할 수 있도록 React에서 강력한 컨텍스트를 생성하는 방법을 알아보세요.

설정

이 예제는 Vite 번들러를 기반으로 합니다.

npm install --save-dev --save-exact vite
npm install --save --save-exact react react-dom react-router-dom

HTML 진입점

이것은 우리 웹사이트의 진입점 역할을 할 것입니다.

touch index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="React">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.jsx" type="module"></script>
  </body>
</html>

JSX 진입점

홈페이지 접속시 실행되는 파일입니다.

touch index.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import {App} from "./components/app";

createRoot(document.getElementById("root")).render(
  <App />
);

사용자 컨텍스트

이 컨텍스트는 데이터를 보유하고 공유할 객체입니다.

mkdir contexts
touch contexts/user.js

import {createContext} from "react";

export const UserContext = createContext();

사용자 정의 후크

사용자 컨텍스트를 쉽게 사용할 수 있도록 후크를 생성합니다.

mkdir hooks
touch hooks/user.js

import {useContext} from "react";
import {UserContext} from "../contexts/user";

export const useUser = () => useContext(UserContext);

사용자 공급자

공급자는 사용자 데이터를 공유하는 데 도움을 주고 이 데이터에 대한 액세스를 허용하는 모든 구성 요소를 제공합니다.

mkdir providers
touch providers/user.jsx

import React, {useReducer, useMemo, useCallback} from "react";
import {UserContext} from "../contexts/user";

const initialState = {
  email: "[email protected]"
};

const reducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_EMAIL":
      return {
        ...state,
        email: action.payload
      };

    default:
      return state;
  }
};

export const UserProvider = ({children}) => {
  const [user, dispatch] = useReducer(reducer, initialState);

  const updateEmail = useCallback(event => {
    dispatch({
      type: "UPDATE_EMAIL",
      payload: event.target.value
    });
  });

  const value = useMemo(() => {
    return {user, updateEmail};
  }, [user, updateEmail]);

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
};

사용자 세부정보 페이지

이것은 컨텍스트에서 데이터를 읽는 방법을 보여주는 간단한 페이지입니다.

mkdir pages
touch pages/user-details.jsx

import React from "react";
import {useUser} from "../hooks/user";

export const UserDetails = () => {
  const {user} = useUser();

  return (
    <>
      <h1>User details</h1>
      <p>Email: {user.email}</p>
    </>
  );
};

사용자 양식 페이지

이것은 &에서 컨텍스트로 날짜를 읽고 업데이트하는 방법을 설명하는 또 다른 간단한 페이지입니다.

touch pages/user-form.jsx

import React, {useCallback} from "react";
import {useUser} from "../hooks/user";

export const UserForm = () => {
  const {user, updateEmail} = useUser();

  return (
    <div>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        value={user.email}
        onChange={updateEmail} />
    </div>
  );
};

애플리케이션 구성 요소

이것은 우리 애플리케이션의 로직을 담을 컴포넌트입니다.

mkdir components
touch components/app.jsx

import React from "react";
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
import {UserProvider} from "../providers/user";
import {UserDetails} from "../pages/user-details";
import {UserForm} from "../pages/user-form";

export const App = () => {
  return (
    <BrowserRouter>
      <UserProvider>
        <header>
          <ul>
            <li>
              <Link to="/user/details">
                User details
              </Link>
            </li>
            <li>
              <Link to="/user/form">
                User form
              </Link>
            </li>
          </ul>
        </header>
        <main>
          <Routes>
            <Route
              path="/user/details"
              element={<UserDetails />} />
            <Route
              path="/user/form"
              element={<UserForm />} />
          </Routes>
        </main>
      </UserProvider>
    </BrowserRouter>
  );
};

시작

이렇게 하면 애플리케이션의 결과를 볼 수 있도록 개발 서버가 시작됩니다.

npx vite

Reference

이 문제에 관하여(React에서 컨텍스트를 사용하여 구성 요소 간에 데이터를 공유하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aminnairi/how-to-share-data-between-components-using-contexts-in-react-1gjg

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)