React Hooks

Hooks 특징

• 계층 변화 없이 상태 관련 로직을 재사용할 수 있다.
• 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.
  (로직의 추적을 쉽게하기위해 리듀서로 지역 상태 값을 관리)
• React 컴포넌트는 함수에 가까우며 함수의 사용을 권장하여 명령형 코드로 해결책을 찾을 수 있게 합니다.

Hooks개발 이유

컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.

재사용 가능한 로직을 제공하지 않아서 render props나 고차 컴포넌트와 같은 패턴을 통해 문제를 해결 했지만 이런 패턴은 컴포넌트의 재구성을 강제하며 코드의 추적을 어렵게 만듭니다.

복잡한 컴포넌트들은 이해하기 어렵습니다.

생명주기 메소드 기반으로 상태관련 로직과 이벤트 리스너 설정하는 로직들이 같이 섞여 들어가 보기에 복잡해 졌습니다.

Class는 사람과 기계를 혼동시킵니다.

React에서 Class 사용을 위해서 javaScript의 this 키워드가 대부분 언어와 다르게 작동하기 때문에 혼란을 야기했고 코드의 재사용성과 구성을 어렵게 만들었다.
class는 코드의 최소화를 힘들게 만들고 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다.
** 핫 리로딩: 앱을 처음부터 다시 시작하지 않고 새로운 코드 변경에 따른 코드 변경사항만 표시하며 변경된 코드에만 적용

Hook 종류

useState

useEffect

useContext

useReduce

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue