React JS의 후크는 무엇입니까

React JS 🪝의 후크는 무엇입니까?

Hooks는 React 16.8에 새로 추가된 기능입니다. 클래스를 작성하지 않고도 상태 및 기타 반응 기능을 사용할 수 있습니다.
반응 클래스 구성 요소에서 후크를 사용할 필요가 없습니다.

반응에서 후크를 사용하는 방법은 무엇입니까?

반응 후크를 사용하려면 react 라이브러리에서 가져와야 합니다.

React JS에는 세 가지 주요 후크가 있습니다.

useState 🌟

useEffect 🌟

사용 컨텍스트

useState 후크

React useState Hook을 사용하면 기능적 구성 요소의 상태를 추적할 수 있습니다.
상태는 일반적으로 애플리케이션에서 추적해야 하는 데이터 또는 속성을 나타냅니다.

import { useState } from 'react';

기본값을 함수에 전달하여 useState를 초기화합니다. useState는 초기 상태를 수락하고 두 값을 반환합니다.

현재 상태

상태를 변경하는 기능입니다.

import { useState } from 'react'

function Fun() {
    const [name, setName] = useState("state hook");
}

useState 예:

useEffect 후크

useEffect 후크를 사용하면 기능 구성 요소에서 부작용을 수행할 수 있습니다.

side effects은 무슨 뜻인가요? API에서 데이터 가져오기, DOM 업데이트, 타이머 등...

useEffect 두 번째 매개 변수는 선택 사항입니다.useEffect(<function>,<dependency>);
두 번째 매개변수를 전달하지 않으면 useEffect는 모든 렌더링에서 실행됩니다.
빈 배열 []을 전달하면 useEffect는 첫 번째 렌더링에서만 실행됩니다.
prop 또는 state를 종속성으로 전달하면 useEffect는 첫 번째 렌더링 시와 종속성이 변경될 때마다 실행됩니다.

useEffect 예