[Today I Learned] 12월 2주차 day6

React hooks??

함수형 컴포넌트에서 react state와 생명주기 기능을 연동 할 수 있게 해주는 것이다.
이전 글에서 다뤘던 class component와는 다르게 hook을 사용한다.
hook 은 클래스(class)안에서는 동작하지 않으며, class 없이 react를 사용할 수 있게 해준다.

리액트 훅?? 왜사용??

1. 컴포넌트에서 상태관련 로직을 사용할 때 Hook 이전에 재사용 가능한 로직을 사용하기 위해서는, render props나 고차 컴포넌트와 같은 패턴을 사용했는데, 이런 패턴은 코드의 추적을 어렵게 만들었다.
   Hook을 활용하면 상태 관련 로직을 추상화해 독립적인 테스트와 재사용이 가능해 레이어 변화 없이 재사용 할 수 있다.
2. 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다.
   (라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다.)

규칙

1. 최상위에서만 Hook을 호출 해야 한다. (반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
2. 리액트 함수 컴포넌트에서만 Hook을 호출해야하고, 일반 JS함수에서는 Hook을 호출해서는 안된다.
   이 두가지 규칙을 강제하는 eslint-plugin-react-hooks 라는 ESLint플러그인이 있는데, 이 플러그인은 Create React App에 기본적으로 포함되어 있다.

Hook 종류

기본 Hooks
useState
useEffect
useContext

추가 Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

[자세한 내용]

react hooks의 장단점