React Hooks에 대해 알아야 할 모든 것.

React Hooks 란 무엇입니까?

React 후크는 함수 구성 요소에서 React 상태 및 수명 주기 기능에 연결할 수 있는 JavaScript 함수일 뿐입니다.

(참고: 후크는 함수 구성 요소 내에서만 사용할 수 있습니다.)

후크를 사용하면 상태를 추가하여 기능 구성 요소에 상태를 추가하고 구성 요소 간에 논리를 공유할 수 있습니다.



React 후크 사용의 이점.

React Hooks를 사용하면 재사용 가능성, 가독성 및 테스트 가능성이라는 세 가지 주요 이점이 있습니다.

후크는 React 수명 주기를 더 쉽게 만들었습니다.

클래스 컴포넌트에서 라이프사이클을 사용할 때 componentDidMount(), componentDidUpdate(), componentWillUnmount() 메서드는 개별적으로 처리되지만 React Hooks를 사용할 때는 그냥 useEffect Hook을 통해 모든 것을 할 수 있습니다.

후크 규칙.

함수 구성 요소 내에서만 React Hooks를 사용할 수 있습니다.

최상위 수준의 후크만 호출합니다. 루프, 조건 또는 중첩 함수 내에서 후크를 호출할 수 없으며 항상 함수 구성 요소의 맨 위에서 호출해야 합니다.

일반 JavaScript 함수에서는 후크를 호출할 수 없습니다.

내장 및 사용자 정의 후크.

React에는 useEffect, useState와 같은 내장 후크가 거의 없습니다. React에서 사용자 정의 후크를 만들 수도 있습니다.

몇 가지 일반적인 내장 후크

useState

useState 후크를 사용하면 기능 구성 요소에 상태 변수를 추가할 수 있습니다. useState에서 초기 상태를 함수에 전달하면 값이 있는 변수와 값을 업데이트하는 하나의 함수가 반환됩니다.

아래 예를 살펴보자

import { useState } from 'react';

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>
  );
}

위의 예는 핸들러 함수 매개변수 자체의 카운터를 증가시킵니다.
여기서 카운터의 초기 값은 0이고 setCount 함수는 카운터의 값을 업데이트하는 데 사용됩니다.

useEffect

useEffect 후크를 이해하려면 먼저 구성 요소의 수명 주기를 이해해야 합니다. 구성 요소의 수명 주기에는 마운트, 업데이트 및 마운트 해제와 같은 세 가지 주요 부분이 포함됩니다.

마운팅: 페이지가 로드될 때
업데이트: 상태가 업데이트될 때
마운트 해제: 사용자가 페이지를 떠날 때

예시:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

자세한 내용은 여기를 참조하십시오: useEffect hooks

추가 내장 후크

useContext

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

결론

읽어주셔서 감사합니다. 이 게시물이 마음에 드셨다면 좋아요를 누르고 의견을 댓글로 남겨주세요.

게시물이 마음에 드셨다면 저에게 제 첫 번째 커피를 사주실 수 있습니다. 감사합니다.



트위터에서 나를 팔로우하세요.

즐거운 코딩하세요!