Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.
기존 React 에서는
와 같은 문제로 인해, 어려움을 겪었고 이를 해결하기 위해 Hooks가 등장하게 되었다.
Hooks는 위의 문제점들을 아래와 같이 해결했다.
classical React | Modern React/Hooks |
---|---|
컴포넌트가 변할때,props가 변할때 라이플사이클 함수 실행 | Data를 동기화→ useEffect() |
prevState/PrevProps와 state/props를 비교 | useMemo() |
HOOKS 개요
React Today and Tomorrow and 90% Cleaner React With Hooks - Youtube
현재 state 값과 이 값을 업데이트 하는 함수를 쌍으로 제공하는 함수로, class의 this.setState 와 유사해보이지만 이전 state와 새로운 state를 합치지 않는다.
useState 에서는 인자로 초기 state 값 하나만 받는다. 이 초기값은 첫번째 렌더링에서 딱 한번만 사용된다.
DOM을 직접 조작하는 작업 등을 하는 사이드 이벡트를 수행할 수 있게 해주는 함수이다. 이 함수는 cDM, cDU와 비슷한 역할을 하고 cDM, cDU, cWU가 합쳐진 것으로 생각해도 좋다.
install eslint-plugin-react-hooks
https://github.com/rehooks/awesome-react-hooks
Google "Custom React Hooks" !