Hooks

Overview

• state Hooks
• Context Hooks
• Ref Hooks
• Effect Hooks
• Performance Hooks
• Other Hooks
• Your own Hooks

 

State Hooks

• 상태를 이용하는 훅은 컴포넌트가 사용자 입력과 같은 정보를 기억할 수 있게 해준다.
  • state를 이용하는 가장 대표적인 Hook으로는 useState가 있다.

 

Context Hooks

• 컨텍스트 훅을 이용하면 컴포넌트가 prop으로 다른 컴포넌트에게 직접 전달하지 않아도 이용가능하게한다.
• 컨텍스트 훅은 마치 우산같은 개념이다. 특정 컴포넌트에 우산을 설치하면 우산아래에 있는 컴포넌트는 
  비를 맞지 않아도 된다. (=prop을 props drilling을 피할 수 있다.)
  • 이러한 개념은 Redux, Zustand, Recoil과 같은 방법으로 대체하여 사용가능하다.

 

Ref Hooks

• Ref는 컴포너틑가 렌더링에 사용하지 않는 정보(예시: DOM노드 혹은 타임아웃ID)를 이용할 수 있게 해준다.
• state와 달리 Ref는 업테이드해도 리렌더링이 일어나지 않는다.
  
  • 내장된 브라우저 API, DOM 노드를 이용할때 유용하게 사용된다.

 

Effect Hooks

•