분류 Reactjs

컨텍스트를 사용하여 데이터 전달 - challege 9

컨텐츠 정보

  • 조회 300 (작성일 )

본문

React 어플리케이션의 데이터는 대개 소품을 통해 구성 요소로 전달됩니다. 소품을 사용하면 부모 구성 요소에서 하위 구성 요소로 데이터가 전송됩니다.


깊게 중첩 된 하위 구성 요소로 데이터를 전달하는 것은 특히 하위 구성 요소를 여러 수준 아래로 구성 요소 트리로 처리 할 때 번거로운 작업이 될 수 있습니다. React Context가 없다면, 우리는 "prop drilling"이라는 기법을 사용합니다.이 기법에서는 일부 구성 요소가 특정 데이터를 필요로 하지 않더라도 데이터를 전달합니다.


React Context는 데이터를 생성하고이 데이터를 공급자를 통해 React 애플리케이션의 모든 구성 요소에 전달하는 기능을 제공합니다.


https://scotch.io/courses/10-react-challenges-beginner/use-context-to-pass-data 


이 React 도전 과제에서는 반응 애플리케이션에 Context를 생성하고 여러 별도의 구성 요소로 데이터를 검색 및 활용하며 데이터를 상황에 맞게 업데이트 해야 합니다.


React의 Context를 사용하면 "드릴링 소품"없이 모든 구성 요소에 데이터를 전달할 수 있습니다. 


과제 : React 컨텍스트 사용 


컨텍스트에서 이름과 위치를 포함하는 사용자 데이터를 작성하고 이 데이터를 두 개의 개별 구성 요소로 전달하고 별도의 구성 요소에서 데이터를 갱신해야 합니다.


이 과제에 대한 요구 사항은 다음과 같습니다.

  • 이름과 위치 데이터로 반응 컨텍스트 만들기
  • 컨텍스트로 부모 구성 요소를 래핑하십시오.
  • 다른 구성 요소의 데이터 검색
  • 다른 구성 요소의 데이터를 업데이트하십시오.

초보자 용 CodeSandbox 


시작하려면 CodeSandbox를 포크하십시오. https://codesandbox.io/s/challenge-9-use-react-context-starter-s8smj


styles.css에는 스타일이 제공되며 자유롭게 사용할 수 있습니다.


마지막 페이지는 다음과 같습니다.


힌트


React 응용 프로그램에서 문맥을 찾습니다. React 문서의 이 게시물은 매우 유용합니다.


시작하려면 이 CodeSandbox를 포크하십시오. https://codesandbox.io/s/challenge-9-use-react-context-final-qq2bg


솔루션 : React Context 사용 


React Context를 사용하면 React 애플리케이션의 구성 요소 간에 데이터를 전달하고 업데이트 할 수 있습니다. 여기에서 React context에 대한 자세한 내용을 볼 수 있습니다.


이 과제에서 우리는 사용자의 이름과 위치에 대한 데이터를 상황에 맞게 생성하여 두 개의 다른 구성 요소로 전달하고 완전히 다른 구성 요소에서 이 데이터의 값을 업데이트 해야 합니다.


이 구성 요소 중 어느 것도 부모 - 자식 관계를 가지고 있지 않습니다.


이 과제는 4 단계로 완료됩니다.


  • 사용자 컨텍스트를 만듭니다.
  • 부모 <App /> 구성 요소를 컨텍스트 공급자로 래핑하십시오.
  • 이름 및 위치 구성 요소에서 이름 및 위치 데이터를 각각 검색하십시오.
  • 컨텍스트에 저장된 데이터를 업데이트합니다.


사용자 컨텍스트 만들기 


React의 Context에서는 응용 프로그램 전체에서 액세스 할 수 있는 전역 변수를 만듭니다. 컨텍스트 공급자는 부모 구성 요소를 래핑 하는 데 사용되며 응용 프로그램의 모든 위치에서 자식은 공급자의 데이터와 이후 업데이트를 구독 할 수 있습니다.


응용 프로그램의 루트 디렉토리에서 컨텍스트 인스턴스를 보유 할 수 있는 UserContext.js를 만들고 컨텍스트 변수를 만듭니다.


UserContext.js에서 createContext API를 사용하여 컨텍스트 개체를 만듭니다. 다음을 사용하여 컨텍스트 데이터를 설정하십시오.


import React, { createContext, useState } from "react";

export const UserContext = createContext();

// This context provider is passed to any component requiring the context
export const UserProvider = ({ children }) => {
  const [name, setName] = useState("William");
  const [location, setLocation] = useState("Mars");

  return (
    <UserContext.Provider
      value={{
        name,
        location,
        setName,
        setLocation
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

여기에서는 UserProvider의 하위 구성 요소에서 사용할 수 있는 UserContext를 내 보냅니다. useState React hook은 이름과 위치의 상태 변수를 유지하는 데 사용되었으며, 해당 메소드를 업데이트하는 데 사용되었습니다.


이러한 데이터는 공급자의 값을 통해 공급자의 모든 가입자에게 전달됩니다.


Context로 App 구성 요소를 래핑하십시오. 


index.js에서 컨텍스트 파일에서 UserProvider를 가져온 다음 <App /> 구성 요소로 감싸 쌉니다. 이 방법으로 컨텍스트 데이터는 응용 프로그램 전체에서 사용할 수 있습니다. 다음과 같이 하십시오.


import React from 'react';
import ReactDOM from 'react-dom';
import { UserProvider } from './UserContext';
import // ... import dependencies

// This component updates with data from context
function App() {
  return (
    <div className="App">
      // Component definition goes in here
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(
  // wrap root element with context
  <UserProvider>
    <App />
  </UserProvider>,
  rootElement
);

모든 컨텍스트 데이터는 현재 루트 요소에 제공되며 하위 요소에 의해 가입 될 수 있습니다.


구성 요소에서 이름 및 위치 데이터 사용 


NameComponent.js에서 UserContext를 가져오고 useContext 훅을 사용하여 컨텍스트 데이터에 가입하십시오. 컨텍스트의 데이터를 사용하도록 표시된 이름을 업데이트하십시오. 다음과 같이하십시오.


import React, { useContext } from 'react';
import { UserContext } from './UserContext';

// This component displays name from Context
const Name = () => {
  const user = useContext(UserContext);

  return (
    <div style={{ marginTop: '30px' }}>
      <h2 className="is-size-4">
        <strong>Name</strong>: {user.name}
      </h2>
    </div>
  );
};

export default Name;

이 이름으로 컨텍스트에서 해당 데이터에서 가져옵니다.


LocationComponent.js의 위치 데이터에 대해 다음을 사용하여 동일하게 수행하십시오.


import React, { useContext } from 'react';
import { UserContext } from './UserContext';

// This component displays location from context
const Location = () => {
  const user = useContext(UserContext);

  return (
    <div>
      {/_ Display user's location from Context _/}
      <h2 className="is-size-4">
        <strong>Location</strong>: {user.location}
      </h2>
    </div>
  );
};

export default Location;

다음으로 별도의 구성 요소에서 컨텍스트 데이터를 업데이트하고 업데이트 된 구성 요소를 구독합니다.


컨텍스트에서 데이터 업데이트 


UserForm.js에서 UserContext를 가져오고 useContext 후크를 사용하여 컨텍스트 데이터를 사용합니다. 컨텍스트에서 setName 및 setLocation 메서드를 검색하여 데이터를 업데이트하기 위해 해당 입력 폼에서 값 변경시이 메서드를 호출합니다. 다음과 같이하십시오.


import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const Form = () => {
    // Retrieve context data
  const user = useContext(UserContext);

  return (
    <div className="user-form">

            {/_ Change user's name in context _/}
      <div className="input-item">
        <label className="label">Update Name: </label>
        <input
          className="input"
          onChange={e => user.setName(e.target.value)}
        />
      </div>

      {/_ Change user's location in context _/}
      <div className="input-item">
        <label className="label">Update Location: </label>
        <input
          className="input"
          onChange={e => user.setLocation(e.target.value)}
        />
      </div>
    </div>
  );
};

export default Form;

이것에 의해, 특정의 입력으로 변경이 검출되면 (자), 대응하는 메소드가 트리거되어 문맥의 값이 변경됩니다. 컨텍스트에 등록 된 다른 모든 구성 요소가 업데이트 됩니다.


마지막 페이지는 다음과 같습니다.


완성 된 CodeSandbox는 다음에서 찾을 수 있습니다. https://codesandbox.io/s/challenge-9-use-react-context-final-qq2bg


결론


이 과제에서 우리는 React Context를 사용하여 props을 사용하지 않고 구성 요소에 데이터를 전달했습니다.