실생활에서 반응 ⚛️ - 컨텍스트와 후크로 단순화

안녕하세요!

나는 팀과 내가 직면한 일상적인 작업을 공유하기 위해 일련의 게시물을 만드는 것에 대해 잠시 동안 생각했습니다. 이것은 첫 번째 것입니다.

모든 React 앱이 동일한 것은 아닙니다. 그들 중 일부는 UI 라이브러리를 사용하고 다른 일부는 사용하지 않습니다. Next 또는 모든 SSR, JS 또는 Typescript, REST 또는 GraphQL 등을 사용할 수 있습니다. 그러나 우리 중 누구도 피할 수 없는 것이 있는데 그것은 국가 관리입니다.

당사 사이트는 헤드리스 CMS를 사용하여 트랜잭션 구성 요소가 있는 일부 사용자 정의 페이지를 제외하고 동적 페이지 및 데이터를 처리합니다. 이 아키텍처는 전역 상태가 필요하지 않았기 때문에 Redux를 사용하지 않았습니다.

문제

Recently we were assigned a task to develop a custom page that would handle a complex state with user flow, steps, multiple options, statuses and API calls. Using only context would've been a nightmare because it'd have been huge and hard to manage. State per component was also discarded because some things had to be shared between components.

해결책

우리는 Context를 전역 상태로 사용하고 API 호출을 통해 이를 채우고 구성 요소에 대한 정보를 단순화하는 사용자 정의 후크를 사용하는 아이디어를 생각해 냈습니다.

우리가 어떻게했는지 단계별로

1. 첫 번째 단계는 컨텍스트를 만드는 것입니다.

// Context.js

import React, { useState } from "react";

const Context = React.createContext([{}, () => {}]); // Our empty Context ready.

const Provider = props => {
  const [state, setState] = useState({
    userFlow: {...},
    otherData: {...},
    aLotOfData: [...]
  }); // Our context is a state hook ;)
  return <Context.Provider value={[state, setState]}>{props.children}</Context.Provider>;
};

export { Context, Provider };

이 컨텍스트는 소비자에게 두 가지 값을 제공합니다. state, info 및 setState, 동일한 정보를 업데이트하는 메서드입니다.

2. 맞춤형 후크를 만들 시간입니다!

여기서 우리의 목표는 Context에서 제공하는 정보를 사용하고 API를 호출하고 데이터를 단순화하여 구성 요소가 시간을 소비하는 데 어려움을 겪지 않도록 하는 것입니다.

// hooks/useUserFlowData.js

import { useContext } from "react";
import { Context } from "../Context";

const useUserFlowData = () => {
  const [state, setState] = useContext(Context); // Our values from Context

  const updateData = name => {
    setState(prevState => ({
      ...prevState,
      userFlow: {
        ...userFlow,
        name: name
      }
    }));
  }; // Our methods to update the state

  // Now we return only the relevant part of the state for the component and the method to update it
  return {
    data: state.userFlow,
    updateData
  };
};

export default useUserFlowData;

3. 컴포넌트에서 후크 소비

구성 요소에서 사용자 지정 후크를 사용할 준비가 되었습니다. 가자!

// components/UserData.js

import React from "react";

import useUserFlowData from "../../hooks/useUserFlowData";

export default () => {
  const { data, updateData } = useUserFlowData(); // Our data and methods

  return (
    <div>
      <span>{data.name}</span>
      <button onClick={() => updateData("New Name")}>Update</button>
    </div>
  );
};

그리고 그게 다야! 구성 요소는 이제 사용자 지정 후크를 사용하여 거대한 컨텍스트에서 특정 데이터를 가져오고 수정합니다.

중요 참고 사항: React 및 Context에 대한 경험이 이미 있다고 가정합니다. 컨텍스트 공급자로 최상위 구성 요소를 래핑하는 것을 잊지 마십시오.

다음은 CodeSandbox에서 작동하는 예입니다.

결론

여기까지 스크롤해 주셔서 대단히 감사합니다!

이런 종류의 게시물이 마음에 드셨거나 개선할 제안/아이디어가 있으면 알려주세요.

또한 Twitter를 처음으로 개발자로 사용하고 있으므로 다음에서 나를 팔로우할 수 있습니다.