useState 후크가 객체가 아닌 배열을 반환하는 이유는 무엇입니까? 사용자 지정 후크를 만들어 보겠습니다.

안녕하세요, 요즘 함수에서 배열을 반환하는 것이 유행이 된 이유를 물어본 적이 있습니까?

우리는 모두 useState, useEffect 또는 useRef와 같은 반응 후크를 알고 있으므로 구성 요소의 최상위 수준에서만 사용할 수 있으며 함수 내에서 사용할 수 없습니다. 사용자 지정 후크는 내부에서 React 후크를 사용할 수 있는 함수입니다.

사용자 지정 후크를 사용하지 않고 예제를 살펴보겠습니다.

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

const Form = () => {
  const [name, setName] = useState(
    JSON.parse(localStorage.getItem("name")) ?? ""
  );
  const [email, setEmail] = useState(
    JSON.parse(localStorage.getItem("email")) ?? ""
  );

  useEffect(() => {
    localStorage.setItem("name", JSON.stringify(name));
  }, [name]);
  useEffect(() => {
    localStorage.setItem("email", JSON.stringify(email));
  }, [email]);
  return (
    <form>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <input
        type="text"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button>Register</button>
    </form>
  );
};

export default Form;

따라서 반응 구성 요소에는 두 가지 입력 형식이 포함되어 있으며 대상은 사용자의 입력을 localStorage에 저장하고 사용자가 돌아올 때 검색하는 것입니다.

따라서 저장된 값이나 빈 문자열에서 초기화되는 각 입력에 대한 상태가 있고, 새 값으로 상태를 설정하는 onChange와 변경될 때 값을 localStorage로 설정하는 useEffect가 있습니다.

괜찮습니다. 하지만 사용자 지정 후크를 사용하여 동일한 예제를 빌드하여 차이점을 확인하겠습니다...

import { useState, useEffect } from "react";

export default function useStoreInput(storageKey) {
  const [value, setValue] = useState(
    JSON.parse(localStorage.getItem(storageKey)) ?? ""
  );

  useEffect(() => {
    localStorage.setItem(storageKey, JSON.stringify(value));
  }, [value, storageKey]);

  return [value, setValue];
}

이것은 단순히 사용자 지정 후크입니다. React 후크를 사용하는 일반 함수입니다. localStorage 키 이름을 여기에 전달하고 상태를 정의하고 이전과 같이 localStorage의 값으로 초기화한 다음 이 상태를 수신하고 저장합니다. 변경되면 localStorage에 저장합니다.

보시다시피 객체가 아닌 배열 [value, setValue]를 반환하도록 선택했습니다. 그 이유를 살펴보겠습니다.

구성 요소가 새로운 사용자 지정 후크를 사용하는지 살펴보겠습니다.

import React from "react";
import useStoreInput from "./useStoreInput";

const Form = () => {
  const [name, setName] = useStoreInput("name");
  const [email, setEmail] = useStoreInput("email");

  return (
    <form>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <input
        type="text"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button>Register</button>
    </form>
  );
};

export default Form;

사용자 지정 후크를 사용할 때 알 수 있듯이 구성 요소에서 코드 반복을 볼 수 없었습니다. 그 이유는 두 가지 때문입니다.

사용자 지정 후크는 간단한 함수에서 구성 요소의 논리를 추출하는 데 유용하며 다른 입력에 대해 논리를 재사용할 수도 있습니다.

배열을 반환하면 값을 더 쉽고 깔끔하게 분해할 수 있습니다. 반환된 배열 요소에만 이름을 부여합니다.

배열 대신 객체를 반환하기로 결정한 경우 구성 요소는 다음과 같습니다.

import React from "react";
import useStoreInput from "./useStoreInput";

const Form = () => {
  const { value: name, setValue: setName } = useStoreInput("name");
  const { value: email, setValue: setEmail } = useStoreInput("email");

  return (
    <form>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <input
        type="text"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button>Register</button>
    </form>
  );
};

export default Form;

따라서 후크를 사용할 때마다 value 및 setValue의 이름을 새 이름으로 바꾸라고 합니다.

이것이 바로 useState() 후크가 객체가 아닌 배열을 반환하는 이유입니다.

const [counter, setCounter] = useState(0);

따라서 반응 작성자는 반환된 배열을 쉽게 해체하고 새로운 상태를 정의할 수 있도록 후크에서 배열을 반환하도록 선택했습니다.

훅이나 리액트, 심지어 자바스크립트만 그런 것이 아니라, 디스트럭처링을 지원하는 언어를 사용한다면 같은 생각을 할 수 있습니다.

배열을 반환하는 것은 굉장하지만 확실히 귀하의 경우에 따라 다릅니다. 10개의 속성을 반환하는 함수가 있지만 항상 모든 속성을 사용하지는 않는 경우가 있다고 가정해 보겠습니다. 경우에 따라 8번째 요소만 사용하고 여기에서도 코드를 유지 대소문자가 너무 어려우므로 배열을 반환하는 것이 항상 올바른 결정은 아닙니다.

고맙습니다!