[UI Component] Design Patterns - Hooks

Hooks

- 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용함

- React 16.8 버전에 Hooks라는 기능이 추가됨

- React의 상태와 생명 주기 함수들을 ES6 클래스를 사용하지 않고 쓸 수 있게 해줌

- 클래스 컴포넌트 단점 (Legacy)

  - 옛날에는 생명 주기 메서드들을 사용하려면 함수형 -> 클래스형 컴포넌트로 리팩토링이 필요했음

  - 그래서 여러 컴포넌트에서 코드 공유 위해 HOC나 Render Prop 패턴을 사용했음
    -> Wrapper Hell 발생 가능

  - 컴포넌트 로직이 복잡해지고 나중에는 디버깅과 성능 최적화를 어렵게 만듦

  - 생명 주기 메서드들은 꽤 많은 코드의 중복을 발생시킴

- React Hooks는 컴포넌트의 상태와 라이프사이클 메서드를 관리할 수 있는 함수임

  - State Hook

  - Effect Hook

    - componentDidMount, componentDidUpdate, componentWillUnmount 조합한 효과

  - Custom Hooks

    - useState, useEffect, useReducer, useRef, useContext, useMemo,
       useImperativeHandle, useLayoutEffect, useDebugValue, useCallback 등과 같은
       빌트인 훅을 이용하여 커스텀 훅 직접 만들 수 있음

- 훅을 사용하여 컴포넌트를 훨씬 명확하고 작은 조각으로 분리함, 재사용하기 훨씬 수월,
   재사용 가능 로직은 테스트 하기 쉬움, 유연성과 가독성 모두 높임

- 복잡한 컴포넌트를 단순화 해 줌

 

- 예시

 

import React, { useState, useEffect } from "react";
import "./styles.css";

import { Count } from "./Count";
import { Width } from "./Width";

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.addEventListener("resize", handleResize);
  });

  return width;
}

export default function App() {
  const counter = useCounter();
  const width = useWindowWidth();

  return (
    <div className="App">
      <Count
        count={counter.count}
        increment={counter.increment}
        decrement={counter.decrement}
      />
      <div id="divider" />
      <Width width={width} />
    </div>
  );
}

 

- 활용

---

[UI Component] Design Patterns - Hooks