React Hook

Hook은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수를 의미한다.

📍 hook의 등장배경

리액트 컴포넌트를 형식은 클래스 컴포넌트와 함수형 컴포넌트가 있다.
함수형 컴포넌트는 직관적이고, 메모리 자원을 덜 사용하고, 선언하기 편리하다는 장점이 있어 개발자들은 함수형 컴포넌트를 주로 사용했다. 하지만 상태(state) 관리와 라이프 사이클(lifecycle) 관리 기능을 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식으로 이용했었다.

개발자들 사이에서 함수형 컴포넌트에서도 해당 기능을 사용하고자 하는 니즈가 늘어남에 따라, 함수형 컴포넌트에서도 Life Cycle Method나 state를 사용할 수 있게 만든게 hook이다.

📍 hook의 특징

리액트는 useState, useEffect 같은 내장 Hook을 몇 가지 제공한다
또한 props, state, context, refs 그리고 lifecycle과 같은 리액트 개념에 좀 더 직관적인 API를 제공한다. 또한 이 개념들을 엮기 위해 새로운 방법을 제공한다. 컴포넌트 간 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능하다.

🚨Hook은 함수형 컴포넌트에서 사용하는 것을 목적으로 만들어졌기 때문에, 클래스 컴포넌트 안에서는 동작하지 않는다.

📍 hook 사용방법

• 함수 컴포넌트 내부와 커스텀 훅 내부에서 호출해야 한다.
  (Hook은 함수형 컴포넌트에서 사용하는 것을 목적으로 만들어졌기 때문에, 클래스 컴포넌트 안에서는 동작하지 않음)
• Hook은 항상 함수 컴포넌트 내의 최상위에서만 호출해야한다.
  (반복문, 조건문, 중첩된 함수 내에서는 Hook을 호출하면 에러 발생)