반응 후크

반응 후크는 무엇입니까

React Hooks는 일반적인 JavaScript에는 없는 기능을 제공하는 기능입니다. 그것들은 모두 '사용'이라는 단어로 시작하며 반복적일 함수 작성을 피하도록 도와줍니다. 내장된 React Hooks를 사용하는 것 외에도 코드를 건조하게(반복적이지 않게) 유지하기 위해 자체 사용자 지정 후크를 빌드할 수도 있습니다.

후크는 반응 구성 요소의 상단에서 가져와야 하며 반응 구성 요소의 최상위 수준에서 호출되는 경우에만 작동합니다. 다른 함수에서 호출하거나 값을 반환하면 오류가 발생합니다.

이 블로그에서는 다음 반응 후크를 다룰 것입니다.

useState

useEffect

useRef

useState

useState은 반응성 데이터를 처리하는 데 사용되는 React Hook입니다. 데이터 상태가 변경되면 사용자가 변경된 데이터를 볼 수 있도록 UI를 다시 렌더링합니다.

아래 예에서는 useState을 사용하여 count 변수의 초기 값을 0으로 설정합니다. 그런 다음 상태를 사용하여 count을 추적하고 count 변수를 증가시키는 클릭 이벤트를 기반으로 UI를 업데이트합니다.

import React, { useState } from 'react'; //import useState

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffect은 UI를 다시 렌더링한 후 반응성 데이터를 처리하는 데 사용되는 React Hook입니다. 다시 렌더링의 부작용으로 발생해야 하는 함수(효과)를 전달합니다.

아래 예에서는 useState을 사용하여 images 변수의 초기 값을 빈 배열로 설정합니다. 우리는 useEffect을 사용하여 API에서 데이터를 가져오고 setImages을 가져온 데이터와 함께 사용합니다. 그런 다음 함수의 반환 값은 가져온 이미지를 UI에 렌더링합니다.
useEffect은 기본적으로 구성 요소가 다시 렌더링될 때마다 UI를 다시 렌더링합니다. 이로 인해 때때로 무한 루프가 발생할 수 있으며 원하지 않는 일이 발생할 수 있습니다. 구성 요소가 처음 렌더링될 때만 '부작용'이 실행되도록 하려면 아래와 같이 useEffect에 빈 배열의 두 번째 인수를 전달할 수 있습니다.

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

function DogPics() {
  const [images, setImages] = useState([]);

 useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => setImages(data.message));
  }, []); // second argument is an empty array

  return (
    <div>
      {images.map((image) => (
        <img src={image} key={image} />
      ))}
    </div>
  );
}

useRef

useState 및 useEffect 과 마찬가지로 useRef 을 사용하려면 먼저 컴포넌트로 가져와야 합니다.
useRef은 구성 요소의 여러 렌더링에서 액세스할 수 있는 값에 대한 '참조'를 캡처하는 데 사용되는 React Hook입니다. ref 속성이 전달된 인수로 초기화된 변경 가능한 .current 개체를 반환합니다. 아래 예에서 .current 변수의 count 값은 0으로 설정됩니다.
useRef을 호출하면 React에서 새로운 내부 .current 값이 생성되고 ref 변수에서 해당 값에 액세스할 수 있습니다. React 내부에서 ref 의 값을 업데이트하기 위해 count.current = count.current + 1 을 사용하여 클릭 이벤트에서 1씩 증가하도록 현재 속성을 업데이트하고 있습니다.

import React, { useRef } from "react"; // import useRef

function CounterRef() {
  const count = useRef(0); // passing it an initial value of 0

  function handleClick() {
    count.current = count.current + 1;
    console.log(count.current);
  }

  return (
    <div>
      <h1>CounterRef</h1>
      <button onClick={handleClick}>{count.current}</button>
    </div>
  );
}

출처

useState

useEffect

useRef