반응 상태 관리(4) : 반동

컨텍스트 API, Redux, Redux 툴킷 및 Recoil과 같은 React 상태 관리 방법을 언급하는 일련의 메모입니다. 이 기사의 주제는 Recoil입니다.

아래 차트는 이 실습 응용 프로그램의 전체 이미지입니다. ComponentA는 사용자 입력 텍스트를 수락하고 소품으로 ComponentB에 전달합니다. 동시에 atom은 입력을 공유하고 선택자는 ComponentC와 componentD가 사용할 수 있도록 대문자와 소문자 입력을 제공합니다. 이 문서의 뒷부분에서 자세한 설명을 볼 수 있습니다.



이것은 이 응용 프로그램의 이미지입니다.



먼저 리코일을 설치해야 합니다.

npm install recoil

또는

yarn add recoil

또는

bower install --save recoil

src 폴더의 파일 구조입니다.

1) RecoilRoot로 루트 구성 요소를 감싸십시오.

반동 상태를 사용하는 구성 요소는 RecoilRoot의 자식 구성 요소여야 합니다. 루트 구성 요소는 배치하기에 가장 좋은 위치 중 하나입니다.

index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import { RecoilRoot } from "recoil";

    ReactDOM.render(
      <RecoilRoot>
        <App />
      </RecoilRoot>,
      document.getElementById("root")
    );

2) 원자 생성

An atom represents a piece of state. Atoms can be read from and written to from any component. (more detailed information is here)

텍스트 상태.js

    import { atom } from "recoil";

    const textState = atom({
      key: "textState",
      default: "",
    });

    export default textState;

3) useRecoilState()로 아톰 읽기 및 쓰기

ComponentA.jsx

    import { useRecoilState } from "recoil";
    import ComponentB from "./ComponentB";
    import textState from "../recoil/test-state";

    const ComponentA = () => {
      const [text, setText] = useRecoilState(textState);
      const changeHandler = (e) => {
        setText(e.target.value);
      };
      return (
        <>
          <input type="text" value={text} onChange={changeHandler} />
          <ComponentB text={text} />
        </>
      );
    };

    export default ComponentA;

4) 선택자에 의한 파생 상태 제공

A selector represents a piece of derived state. Derived state is a transformation of state. (more detailed information is here)

입력 텍스트를 각각 대문자와 소문자로 변환하는 데 사용하기로 결정했습니다.

텍스트 대문자.js

    import { selector } from "recoil";
    import textState from "./test-state";

    const textUppercaseState = selector({
      key: "textUppercaseState",
      get: ({ get }) => {
        const text = get(textState);
        return text.toUpperCase();
      },
    });

    export default textUppercaseState;

텍스트 소문자.js

    import { selector } from "recoil";
    import textState from "./test-state";

    const textLowercaseState = selector({
      key: "textUppercaseState",
      get: ({ get }) => {
        const text = get(textState);
        return text.toUpperCase();
      },
    });

    export default textLowercaseState;

5) useRecoilValue에 의한 선택기 사용

useRecoilValue를 사용하여 textLowercaseState 및 textUppercaseState를 읽을 수 있습니다.

CompomentC.jsx

    import { useRecoilValue } from "recoil";
    import textUppercaseState from "../recoil/text-uppercase";

    const ComponentC = () => {
      const uppercaseText = useRecoilValue(textUppercaseState);
      return (
        <>
          <h1>Uppercase</h1>
          <h2>{uppercaseText}</h2>
        </>
      );
    };

    export default ComponentC;

ComponentS.jsx

    import { useRecoilValue } from "recoil";
    import textLowercaseState from "../recoil/text-lowercase";

    const ComponentD = () => {
      const lowercaseText = useRecoilValue(textLowercaseState);
      return (
        <>
          <h1>Lowercase</h1>
          <h2>{lowercaseText}</h2>
        </>
      );
    };

    export default ComponentD;

읽어 주셔서 감사합니다 :)

원본 기사는 here입니다.