리액트 Hook

Hook이란?

함수 컴포넌트에서 state를 사용할 수 있게 해주는 기능.

 

Hook 도입 전에는 클래스 컴포넌트에서만 state를 사용할 수 있었다.

클래스는 함수보다 작성이 까다롭기 때문에, Hook 등장 이후로는 거의 사용하지 않는다.

 

클래스형 컴포넌트 VS 함수 컴포넌트

클래스로부터 생성된 인스턴스는 독립적으로 움직일 수 있기 때문에, state를 가질 수 있었다.

함수는 한 번 호출되면 메모리 상에서 사라지기 때문에, state를 가질 수 없었다.

=> 클로저를 사용하면 함수도 state를 가질 수 있다. 이를 이용해서 Hook이 등장했다.

 

Hook 사용 규칙

1. 최상위 레벨에서만 Hook을 호출해야 한다. 

반복문, 조건문, 중첩 함수 내에서 호출하면 오류가 난다.

import React, { useState } from "react"

function Hooks(props) {
  if (!props.isExist) {
    const [state, setState] = useState(); // Error!
  }

  const [state2, setState2] = useState(); // Error!
}

 

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

일반 js 함수에서는 호출할 수 없다. 

 

 

 

참고

위코드 참고자료

React 공식문서 - Hooks at a Glance

w3schools - React Hooks