React Hooks란?

Why React Hooks?

Hook은 React 16.8버전부터 추가된 기능이다. 기존 Class 컴포넌트의 문제점들을 개선하여 Functional 컴포넌트에서 React의 여러 기능들을 더 간단하고 편리하게 사용할 수 있게 되었다.

Classical React의 문제점

기존의 Classical React에 대표적으로 다음과 같은 불편한 점들이 있었다.

1. Class는 사용자에게 많은 혼란을 초래했다.

• 자바스크립트의 This가 어떻게 작동하는지 알아야만 사용 가능했다.
• 이벤트 핸들러 사용 시, Binding을 필수적으로 해주어야만 했다.
  
  This Binding 때문에 코드가 불필요하게 장황해지고 있다.
  

2. 복잡한 컴포넌트는 이해하기 너무 어렵다.

• 여러 데이터를 라이프 사이클에 따라서 보여주고 없애야하는데, componentDidmount, componentDidUpdate, componentDidUnmount... 등 메서드를 사용하면서 코드가 매우 복잡해졌다.
  
  
  똑같은 데이터를 모든 라이프 사이클 메서드에 불러와야 한다.
  데이터가 언제 어떻게 변할 것인지 명확하게 파악하기 어렵다.

  Dependency와 return을 활용하여 라이프 사이클 메서드를 보다
  간결하고 직관적으로 표현할 수 있게 되었다.
  
  

3. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

• Classical React에서 재사용 로직을 사용하기 위해 HOC(Higher-Order Component)나 Render Props를 사용하는데, class가 중첩이 되는 구조로 만들어지게 된다. 이런 구조가 반복되면 퍼포먼스가 점점 느려지고 코드의 가독성 또한 떨어지게 되는 문제가 생긴다.

  고차 컴포넌트 (HOC) : 리액트 컴포넌트(ReactComponent)를 인자로 받아 새로운 리액트 컴포넌트(EnhancedReactComponent)를 반환하는 함수
  Render Props : props 에 JSX 를 렌더링하는 함수를 전달. render 함수에서, 전달받은 함수에 넣어주고 싶은 값을 함수의 인자로 전달하여 사용.

재사용 로직을 구현하다가 Wrapper Hell이 발생하기도 한다.

Hook을 사용하면

• 로직의 재사용 가능, 관리하기가 쉽다.
  • 함수형 컴포넌트이기 때문에, 흔히 함수 안에서 함수를 호출하는 것과 같이 재사용이 용이하다. React 내장 Hook 이외에도 새로운 Custom Hook을 만들어 사용할 수 있다.
• React의 필요한 로직만 Hook하여서 쓸 수 있다. 즉, 함수 컴포넌트에서 state의 생명주기 기능을 연동(hook into)할 수 있다.
  → Stateful한 함수형 컴포넌트 사용 가능
• 상태 관리 방법을 더 쉽게 이해할 수 있다.

Hooks 사용하기

useState

: useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. state 변수와 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다. 클래스 컴포넌트의 this.state.count와 this.setState와 유사하다.

useEffect

: useEffect Hook을 이용하여 react가 컴포넌트 렌더링 이후 동작을 명령할 수 있다. react는 이 Hook 안의 함수를 기억했다가(함수 = effect) DOM 업데이트를 수행한 이후에 불러낸다.

useEffect 정리
: useEffect의 두 번째 인자 ( dependencies )에 따라 ComponentDidMount, ComponentWillUnmount, ComponentDidUpdate의 역할을 할 수 있다.

1. useEffect ( function ) 
-> dependencies가 아예 없으므로,
ComponentDidMount ( 컴포넌트가 마운트 됐을 때 마다 ),
ComponentWillUnmount ( 컴포넌트가 언마운트 될 때 마다 ), 
ComponentDidUpdate ( 컴포넌트가 업데이트 됐을 때 마다 ),
function이 실행된다

2. useEffect ( function, [] ) 
-> dependencies가 비었으므로, ComponentDidMount에만 function이 실행된다.

3. useEffect ( function, [ number ]
-> dependencies가 number이므로, number라는 state가 마운트 되거나 변할 때 마다 
(ComponentDidMount, ComponentDidUpdate) function이 실행된다. 

4. useEffect ( () => function, [])
-> useEffect에서 첫 번째 인자의 함수가 다른 함수를 리턴한다면 ComponentWillUnMount시 호출된다.
* []가 없으면 1번과 동일.

이외에 React 내장 함수로는 다음과 같은 함수들이 있다.

• useContext
• useRef
• useMemo
• useCallback
• useReducer
  
  

참고자료
Hook의 개요 - React 공식문서
React Hooks (1) Hook의 등장 배경 - youthfulhps
React Hooks에 대하여 - jinsk9268