React 후크 및 후크 유형

## React Hook이 무엇인가요?

Hooks는 react 16.8 버전에 도입된 새로운 기능입니다.

클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다. 후크는 함수 구성 요소의 React 상태 및 수명 주기 기능에 "연결"하는 기능입니다.

클래스 내에서 작동하지 않습니다.

후크는 항상 React 함수의 최상위 수준에서 사용해야 합니다.

노드 버전 6 이상. NPM 버전 5.2 이상

function Example(props) {
// Hooks can be used here
return <div />;
}

React Hooks가 필요한 이유는 무엇입니까?

이전에는 기능 구성 요소를 작성하고 일부 상태를 적용해야 하는 경우 기능 구성 요소를 클래스로 변경하기만 하면 됩니다.
그러나 새 업데이트에서는 기능 구성 요소 내부에 후크를 사용하여 리팩토링 절차를 쉽게 만들 수 있습니다.
또한 다음과 같은 반응 후크를 사용하면 많은 이점이 있습니다.

React Hooks의 장점:-

기존 코드를 재사용할 때 유연성이 향상되었습니다.

기능 구성 요소가 복잡해지면 클래스 구성 요소로 리팩토링할 필요가 없습니다.

이것에 대해 전혀 걱정할 필요가 없습니다.

메서드에 대한 구속력이 더 이상 없습니다.

후크를 사용하여 로직과 UI를 구분하는 것이 더 간단합니다.

후크 규칙

후크는 React 함수 구성 요소 내에서만 호출할 수 있습니다.

후크는 구성 요소의 최상위 수준에서만 호출할 수 있습니다.

후크는 조건부일 수 없습니다.

React 클래스 구성 요소에서 후크가 작동하지 않음

후크의 종류

내장 후크용 API를 설명합니다. 10개의 내장 후크가 있습니다. 그것은 클래스 기반 구성 요소와 유사한 기능을 달성하는 것입니다.
후크는 두 부분으로 나눌 수 있습니다.

기본 후크

useState

useContext

useEffect

추가 후크

useCallback

useReducer

useLayoutEffect

useMemo

useRef

useDebugvalue

useImperativeHandle

useState

useState는 함수 구성 요소입니다. useState는 초기 상태를 수락하고 두 값을 반환합니다.

현재 상태

상태를 업데이트하는 함수입니다.

첫 번째 값 색상은 현재 상태입니다

.

두 번째 값 setColor는 상태를 업데이트하는 데 사용되는 함수입니다.

업데이트 상태
상태 값을 업데이트할 때 상태 업데이트 기능을 사용합니다.

useEffect

useEffect 후크를 사용하면 구성 요소에서 부작용을 수행할 수 있습니다. 데이터 가져오기, DOM 및 타이머 업데이트 지시
useEffect(<function>,<dependency>)
useEffect는 두 개의 인수를 허용합니다. 두 번째는 선택 사항입니다.


매초 카운트 변경

useContext

useContext” 후크는 소품을 수동으로 각 수준으로 전달하지 않고 구성 요소 계층 전체에서 액세스할 수 있는 공통 데이터를 생성하는 데 사용됩니다. 정의된 컨텍스트는 "소품"을 포함하지 않고 모든 하위 구성 요소에서 사용할 수 있습니다.

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

function Component1() {
  const [data, setdata] = useState("data");

  return (
    <>
      <h1>{`Hello ${data}!`}</h1>
      <Component2 data={data} />
    </>
  );
}

function Component2({ data }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 data={data} />
    </>
  );
}

function Component3({ data }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 data={data} />
    </>
  );
}

function Component4({ data }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 data={data} />
    </>
  );
}

function Component5({ data }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`the ${data} is here!`}</h2>
    </>
  );
}
export default Component1;