정의

• React 16.8 버전에 추가된 공식 라이브러리
• 클래스형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 함수형 컴포넌트에서도 사용 가능
• JavaScript 의 클로저(Closer)를 이용
• 현재 공식문서에서는, 클래스형 컴포넌트 보다는 함수형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장. 단, 기존의 클래스형 컴포넌트들을 Hook을 이용한 함수형 컴포넌트로 refactoring 할 필요는 없음.

왜 필요한가?

• 함수형 컴포넌트들은 기본적으로 리렌더링이 될 때, 함수 안에 작성된 모든 코드가 다시 실행된다.

  • 클래스형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render() 를 제외한 나머지 method 및 state 는 그대로 보존이 되어 있습니다.
  • 반대로 함수형 컴포넌트들은 기존에 가지고 있던 상태(state)를 전혀 관리(기억)할 수 없습니다.
  • 그래서 함수형 컴포넌트를 Stateless Component 라고 했던 것.
  • 단순하게 React 에서의 State 만을 의미하는 것이 아닌, 함수 내에 써져 있는 모든 코드 및 변수를 기억할 수 없다는 의미로 즉, 함수형 컴포넌트는 리렌더링될 때 무조건 새롭게 선언 & 초기화 & 메모리에 할당이 됨

• *Hook의 등장으로, 브라우저에 메모리를 할당 함으로써, 함수형 컴포넌트가 상태(state)를 가질 수 있게 되었다. 즉, Hook을 통해 함수 내에 써져 있는 코드 및 변수를 기억할 수 있게 됨*

  (정확하게는 Closure을 이용하여 함수형 컴포넌트 바깥에 state를 저장한다.)

언제나 유용한가?

위에서 설명하였듯이, Hook은 브라우저의 메모리 자원을 사용한다. 따라서 함부로 남용하였다가는 오히려 전체적인 성능 저하를 불러올 수 있다.

왜 Hook을 사용하면 좋은가?

1. 함수형 컴포넌트로 통일

함수형, 클래스형으로 분리해서 개발하던걸 함수형으로 통합 개발이 가능하다.

hook이 등장하기 이전에는 state가 있으면 class, 오직 뷰만 그린다면 function 이었다.

2. useEffect를 통한 LifeCycle 에 흩어져 있는 logic을 묶음