후크는 어디에서 왔습니까?

처음에 React는 구성 요소 간의 상태 및 공유 논리와 같은 것에 대해 클래스 구성 요소에 의존하여 복잡한 구성 요소 계층과 혼란스러운 소품 논리를 유발했습니다. 이러한 문제를 완화하기 위해 React는 2018년 말에 후크를 도입했습니다.

useState 및 useEffect와 같은 매우 일반적인 후크가 내장되어 있지만 React는 자체 사용자 정의 후크를 생성하는 기능도 제공합니다.

수업 중 휴식

클래스의 필요성을 방지하기 위해 후크를 사용하면 사용자가 React 함수 구성 요소에서 React 상태로 "연결"할 수 있습니다. 후크는 항상 "사용"으로 시작하고 두 가지 주요 기능 규칙을 따릅니다. 후크는 내부 루프나 조건부에서 호출하면 안 됩니다. 최상위 수준으로 유지되어야 합니다. 또한 일반 JS 함수가 아닌 React 함수 구성 요소에서만 호출해야 합니다. 후크를 호출할 수 있는 유일한 다른 위치는 사용자 지정 후크 구성 요소입니다.

나만의 빌드

언급한 대로 사용자 지정 후크의 규칙은 "useSOMETHING"입니다. 여러 구성 요소 간에 상태 저장 논리를 재사용하려는 경우 언제든지 사용자 지정 후크를 만들 수 있는 좋은 기회가 있습니다. 시작하려면 src/hooks/useBlogExample.js와 같은 함수 구성 요소와 마찬가지로 새 후크에 대한 파일을 만듭니다. 함수를 생성하는 것은 첫 글자의 일반적인 대문자 대신 "use____"라고 불리는 것을 제외하고는 일반 구성 요소처럼 보입니다.

function useBlogExample() {
  //DO SOMETHING HERE
}

export default useBlogExample;

사용자 지정 후크는 단순히 콘솔에 무언가를 인쇄하는 것과 같이 모든 기능이 수행할 수 있는 간단한 작업을 제공할 수 있습니다.

import { useState, useEffect } from 'react';

function useBlogExample() {
  console.log("THIS IS FROM A CUSTOM HOOK")
}

export default useBlogExample;

이 후크를 호출하려면 다른 함수나 후크처럼 가져와서 호출하기만 하면 됩니다useBlogExample() . 하지만 console.log는 이를 활용하기 위해 후크가 필요하지 않기 때문에 그다지 유용하지 않습니다. 사용자 정의 후크는 React 함수 구성 요소 외에 후크를 호출할 수 있는 또 다른 위치이므로 useState 및 useEffect를 활용하는 후크를 작성해 보겠습니다. 시작하려면 useState 및 useEffect를 사용자 지정 후크로 가져올 수 있습니다.

import { useState, useEffect } from 'react';

function useBlogExample() {
  //DO SOMETHING HERE
}

export default useBlogExample;

사용자 지정 후크 내에서 state 및 useEffect는 React 구성 요소에서와 동일한 방식으로 작동합니다. 후크 내에서 상태를 설정할 수 있으며 API 가져오기와 같은 용도로 useEffect를 호출할 수 있습니다.

import { useState, useEffect } from 'react';

function useBlogExample() {
  const [state, setState] = useState(null);

  useEffect(() => {
    fetch("http://localhost:3000/items")
    .then(resp => resp.json())
    .then(data => setState(data))
  }, []);

export default useBlogExample;

현재 이 후크는 API 가져오기에서 반환된 데이터에 대해서만 자체 상태를 조정합니다. 데이터가 실제로 이 후크에서 나오게 하려면(실제로 그렇게 합니다!) 일반 함수에서와 마찬가지로 데이터를 반환하기만 하면 됩니다.

import { useState, useEffect } from 'react';

function useBlogExample() {
  const [state, setState] = useState(null);

  useEffect(() => {
    fetch("http://localhost:3000/items")
    .then(resp => resp.json())
    .then(data => setState(data))
  }, []);

  return {state: state};

export default useBlogExample;

구성 요소에서 호출될 때 구조가 해체될 수 있도록 상태 변수와 함께 개체를 반환합니다. const {data} = useBlogExample();이제 useBlogExample을 호출할 때마다 후크는 해당 API 호출의 결과를 반환합니다. 이는 유용하지만 다재다능하지는 않습니다. 두 구성 요소가 정확히 동일한 가져오기 호출을 수행할 가능성은 없습니다. 두 구성 요소가 데이터베이스의 두 위치에 대해 가져오기 호출을 수행하고 있을 수 있습니다. 다양한 URL을 받아들이도록 후크를 조정할 수 있습니다! 후크가 매개변수를 수락하도록 허용하고 가져오기 호출의 URL에서 매개변수를 활용하기만 하면 됩니다.

import { useState, useEffect } from 'react';

function useBlogExample(location) {
  const [state, setState] = useState(null);

  useEffect(() => {
    fetch(`http://localhost:3000/${location}`)
    .then(resp => resp.json())
    .then(data => setState(data))
  }, []);

  return {state: state};

export default useBlogExample;

이제 하나의 구성 요소가 후크를 호출하여 한 끝점에서 응답을 받을 수 있고 별도의 후크가 다른 위치를 호출할 수 있습니다! 아마도 우리는 localhost:3000/names 및/professions에서 호출을 원할 것입니다. 한 구성 요소에서 {state} = useBlogExample("names")를 호출하고 다른 구성 요소에서 {state} = useBlogExample("professions")를 호출할 수 있습니다. 다른 유형의 데이터를 반환하기 위해 후크를 사용하는 경우 두 가지 가능성을 모두 설명할 수 있을 만큼 변수 이름을 모호하게 유지해야 합니다. 원하는 경우 데이터를 구조화할 때 데이터의 이름을 보다 구체적인 변수로 바꿀 수 있습니다.

그리고 그게 다야! 사용자 지정 후크는 기본적으로 재사용 가능한 기능이지만 상태 및 기타 후크를 활용하여 React 구성 요소 간의 중복을 정리할 수 있습니다. 응용 프로그램이 커짐에 따라 생성하는 모든 새 구성 요소에서 사용할 수 있는 추가 보너스가 있습니다.