반응 후크

후크는 기능 구성 요소에 수명 주기 기능과 상태를 추가할 수 있는 단순한 기능입니다.

후크 규칙

Hooks로 작업할 때 따라야 하는 두 가지 규칙이 있습니다.
후크는 항상 최상위 수준에서 호출되어야 합니다. 루프, 조건 또는 중첩 함수 내에서 후크를 호출해서는 안 됩니다. 이는 구성 요소를 렌더링할 때마다 후크가 매번 같은 순서로 호출되도록 하기 위한 것입니다.
Hook은 React 함수에서만 호출할 수 있습니다. 후크는 일반 JavaScript 함수에서 호출할 수 없습니다. 따라서 기능 구성 요소와 사용자 정의 Hooks에서 호출할 수 있습니다.

기본 후크

사용 상태

const [state, setState] = useState(initialState);

이 후크는 기능 구성 요소에 상태를 추가하는 데 사용됩니다. 필요한 경우 initialState 인수를 사용하여 초기 상태를 제공할 수 있습니다. 후크는 현재 상태와 상태를 업데이트하는 데 사용되는 함수를 반환합니다. 상태가 업데이트되면 구성 요소가 다시 렌더링됩니다.

상태 및 업데이트 기능의 이름을 지정하기 위해 따르는 일반적인 규칙은 [something, setSomething]입니다.

사용 효과
이 후크는 데이터 가져오기, 구독 설정 등과 같은 구성 요소의 부수적 기능을 수행하는 데 사용됩니다. 구성 요소가 렌더링 직후에 무언가를 하도록 만드는 데 사용됩니다. 기본적으로 모든 렌더링 후에 실행됩니다.

useEffect(()=> {
// some code }, [])

선택적 두 번째 인수는 해당 인수의 값이 변경된 경우에만 구성 요소가 다시 렌더링되도록 하는 것입니다.

사용 컨텍스트
이 후크는 상태를 전역적으로 관리할 수 있으므로 소품 드릴을 피하는 데 유용합니다. 이러한 전역 상태가 변경되면 구성 요소를 다시 렌더링할 수 있습니다.

먼저 컨텍스트를 생성하고 초기화해야 합니다. 그런 다음 자식 구성 요소는 컨텍스트 공급자에 래핑되어야 하고 상태 값이 제공되어야 합니다.

const UserContext = createContext()
function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

그런 다음 모든 구성 요소에서 사용자 컨텍스트에 액세스할 수 있습니다.

커스텀 후크

또한 React는 필요에 따라 자체 후크를 생성할 수 있는 옵션을 제공합니다. 재사용 가능한 함수가 있는 경우 사용자 정의 후크가 필요할 수 있습니다. 커스텀 Hook의 이름은 "use"로 시작해야 합니다. 예: useStatus.