React Hooks

Hook?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

Hooks는 왜 생겼을까

기존 React 에서는

• 컴포넌트 간 상태와 관련된 로직 재사용불가
  (HOC, render props를 통한 재사용성의 한계 - 래퍼지옥 : wrapper Hell)
• 이해하기 힘든 복잡한 컴포넌트 & 라이플사이클 메소드(cDM, cDU, cWU...)
• 사람과 기계를 혼동시키는 Class
  (this binding, Binding event handlers...)

와 같은 문제로 인해, 어려움을 겪었고 이를 해결하기 위해 Hooks가 등장하게 되었다.

Hooks는 위의 문제점들을 아래와 같이 해결했다.

• 로직 재사용 불가 → 계층 변화없이 상태 관련 로직 재사용 가능
• 컴포넌트 문제 → 로직에 기반을 둔 작은 함수 형태로 컴포넌트 구축 가능
• Class 문제 → Class 없이 React를 충분히 활용할 수 있게 한다.

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

---

내장 Hook

State Hook : useState

현재 state 값과 이 값을 업데이트 하는 함수를 쌍으로 제공하는 함수로, class의 this.setState 와 유사해보이지만 이전 state와 새로운 state를 합치지 않는다.

useState 에서는 인자로 초기 state 값 하나만 받는다. 이 초기값은 첫번째 렌더링에서 딱 한번만 사용된다.

Effect Hook : useEffect

DOM을 직접 조작하는 작업 등을 하는 사이드 이벡트를 수행할 수 있게 해주는 함수이다. 이 함수는 cDM, cDU와 비슷한 역할을 하고 cDM, cDU, cWU가 합쳐진 것으로 생각해도 좋다.

그외

• useContext
• useRef
• useMemo and useCallback
• useReducer

React Hooks: useState 사용법
개념정리

---

React Hooks 연습해보기

install eslint-plugin-react-hooks

• Facebook running npm package
• https://reactjs.org/docs/hooks-rules.html#eslint-plugin
• https://www.npmjs.com/package/eslint-plugin-react-hooks

Practical React Hooks

react hooks tutorial by ben awad

Custom Hooks

https://github.com/rehooks/awesome-react-hooks
Google "Custom React Hooks" !