자신만의 React Hooks 작성, 반환 값

JavaScript는 함수에서 하나의 값만 반환할 수 있습니다. 그러나 현대 JavaScript의 구조 해제는 이것을 크게 부적절하게 만듭니다.

함수에서 배열이나 객체의 여러 값을 반환하고 즉시 구조를 분해할 수 있습니다. 그리고 아시다시피 React hook은 규칙을 따르는 기능일 뿐입니다.

const [one, two] = useNumbers()
const { a, b, c } = useAlphabet()

그렇다면 다른 방법보다 한 방법을 사용하는 이유는 무엇입니까?

몇 가지 다른 사용 사례를 살펴보고 배열과 객체를 반환해야 하는 이유를 살펴보겠습니다.

첫째, 우리는 아무것도 반환할 필요가 없다는 점에 유의해야 합니다. 내장React.useEffect 후크가 바로 이 작업을 수행합니다(실제로 undefined 반환).

문자열이나 정수와 같은 단일 값을 반환할 수도 있습니다. WebSocket API를 구독하고 현재 온라인 사용자 수를 나타내는 지속적으로 업데이트되는 값을 반환하는 후크를 예로 들 수 있습니다.

function OnlineUsers() {
  const userCount = useOnlineUserCount()

  return (
    <Users count={userCount} />
  )
}

배열 반환

매우 일반적인 사용 사례가 있는 후크는 반환 값을 배열로 내보내는 이점이 있습니다. 이것의 좋은 예는 실제로 내장React.useState 후크입니다. 배열을 내보내면 상태 변수 및 해당 설정자의 이름을 쉽게 사용자 지정할 수 있습니다. 고유한 이름을 사용하면 후크를 반복적으로 사용할 수 있습니다.

const [color, setColor] = useState('MintCream')
const [width, setWidth] = useState('100vw')

배열 반환의 이점을 얻을 수 있는 사용자 정의 후크의 약간 고안된 예는 일부 상태를 유지하는 CSS 빌더일 수 있습니다.

const [leftStyle, setLeftTheme] = useStyleBuilder('dank-kitty')
const [rightStyle, setRightTheme] = useStyleBuilder('no-drama-llama')

배열을 반환할 때

반환해야 하는 값의 수가 적습니다. 순서는 중요하며 많은 값의 순서를 기억하려면 추가 두뇌 주기가 필요합니다.

후크는 동일한 구성 요소에서 두 번 이상 사용될 것으로 예상됩니다. 객체를 구조화할 때 속성의 이름을 바꿀 수 있지만 배열에서 반환된 사용자 지정 이름의 값에 대한 더 간단한 구문이 더 합리적입니다.

객체 반환

보다 전문화된 사용 사례가 있고 더 많은 수의 값을 반환하는 후크는 객체를 반환함으로써 이점을 얻을 수 있습니다.

객체 구조화는 순서에 의존하지 않으며 필요하지 않은 값을 무시하는 것이 더 쉽습니다. 핸들러 함수와 함께 3개 또는 4개의 상태 값이 있는 후크를 예로 들 수 있습니다.

const { color, count, isValid, handleChangeColor, handleChangeCount } = useItemOptions()

객체를 반환할 때

반환해야 하는 값의 수가 많습니다. 객체를 반환할 때 순서를 기억하거나 모든 값을 사용할 필요가 없습니다.

후크는 동일한 구성 요소에서 두 번 이상 사용될 것으로 예상되지 않습니다. 구성 요소에서 한 번만 사용되는 후크에서 반환된 객체를 구조화할 때 원래 속성 이름을 사용할 수 있습니다.

비구조화하지 않음

후크가 더 많은 수의 값을 반환해야 하고 두 번 이상 사용될 것으로 예상되는 경우 구조를 전혀 분해할 필요가 없습니다. 이것은 때때로 유용할 수 있습니다.

  const leftOptions = useItemOptions()
  const rightOptions = useItemOptions()

  return (
    <>
      <Column
        side="left"
        color={leftOptions.color}
        count={leftOptions.count}
        isValid={leftOptions.isValid}
        handleChangeColor={leftOptions.handleChangeColor}
        handleChangeCount={leftOptions.handleChangeCount}
      />
      <Column
        side="right"
        color={rightOptions.color}
        count={rightOptions.count}
        isValid={rightOptions.isValid}
        handleChangeColor={rightOptions.handleChangeColor}
        handleChangeCount={rightOptions.handleChangeCount}
      />
    </>
  )

스프레드로 구조화하지 않음

후크가 반환하는 객체의 속성 이름에 주의를 기울이면 spread syntax을 사용하여 구성 요소에 직접 소품을 덤프할 수 있습니다.

위의 구성 요소는 다음과 같은 스프레드 구문을 사용하여 다시 작성할 수 있습니다.

  const leftOptions = useItemOptions()
  const rightOptions = useItemOptions()

  return (
    <>
      <Column side="left" {...leftOptions} />
      <Column side="right" {...rightOptions} />
    </>
  )

(분명히 JSX의 스프레드 연산자에 대한 Dev.to 구문 강조 표시는 아직 지원되지 않지만 작동합니다.)

결론

서로 다른 시간에 의미가 있는 여러 가지 방법으로 여러 값을 반환할 수 있습니다. 바라건대, 이것은 후크를 더 읽기 쉽고 이해하기 쉽게 만드는 방법에 대한 아이디어를 제공할 것입니다.

여기 도구 벨트에 많은 옵션이 있습니다. 겹치는 부분도 있고 절충점도 있으므로 응용 프로그램에 적합한 것이 무엇인지 살펴보고 파악하세요. 그리고 즐거운 시간 보내세요!