HOOK 패턴

1. 사용이유

• React의 상태와 생명 주기 함수들을 ES2015의 클래스를 사용하지 않고 쓸 수 있게 해주기 때문입니다 .

// Class를 사용했을 때 

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

// Hook을 사용했을 때 

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
       Click me
      </button>
    </div>
  );
}

 

2. 클래스 컴포너트에 대해 알아보자

• Hooks가 추가되기 전, React에서 상태와 생명 주기 함수를 사용하려면 아래의 예시와 같이 클래스 컴포넌트를 꼭 사용해야했습니다.

class MyComponent extends React.Component {
  /* Adding state and binding custom methods */
  constructor() {
    super()
    this.state = { ... }

    this.customMethodOne = this.customMethodOne.bind(this)
    this.customMethodTwo = this.customMethodTwo.bind(this)
  }

  /* Lifecycle Methods */
  componentDidMount() { ...}
  componentWillUnmount() { ... }

  /* Custom methods */
  customMethodOne() { ... }
  customMethodTwo() { ... }

  render() { return { ... }}

• 클래스 컴포넌트는 생성자에서 상태를 선언한뒤, componentDidMount와 componentWillUnmout 같은 생명 주기 메서들들을 생명 주기를 기준으로 사이드 이펙트를 발생시켰습니다. 그 외에 추가 동작을 위한 메서드들을 선언할 수 있었습니다.

2.1 ES2015 클래스란

• 앞서 말했듯이, hooks가 추가되기 전에는 상태/생명 주기 메서드를 쓰려면 클래스 컴포넌트로 만들어야 했기 때문에 해당 기능을 쓰기 위해서는 종종 함수형 컴포넌트를 클래스형 컴포넌트로 리펙토링 해야만 했습니다.

function Button() {
  return <div className="btn">disabled</div>
}

2.2 재설계

• 여러 컴포넌트에서 코드를 공유하기 위해 HOC패턴이나 Render Prop 패턴을 사용하지만, 나중에 이런 패턴들을 도입하려고 할때는 구조를 재설계해야 할 수도 있습니다.

• 또한, 컴포넌트의 크기가 클수록 앱을 재구성하기가 까다로우며, 컴포넌트를 많이 래핑하다보면 Wrapper Hell이라는 안티 패턴이 나타날 수 있습니다.
• Wrapper Hell은 React나 다른 컴포넌트 기반 프레임워크에서 발생하는 안티패턴으로, 컴포넌트 구조가 너무 깊게 중첩되면서 코드의 가독성과 유지보수성이 떨어지는 상황을 말합니다. 특히 HOC, Context API를 많이 사용할 경우에 발생합니다.

<WrapperOne>
  <WrapperTwo>
    <WrapperThree>
      <WrapperFour>
        <WrapperFive>
          <Component>
            <h1>Finally in the component!</h1>
          </Component>
        </WrapperFive>
      </WrapperFour>
    </WrapperThree>
  </WrapperTwo>
</WrapperOne>

• 이런 Wrapper Hell은 앱 내에서 데이터가 어떻게 흘러가는지 파악하기 어렵게 만들 뿐더러, 어떤 동작이 이뤄지고 있는지도 알기 어렵게 만듭니다.

2.3 복잡도

• 클래스 컴포넌트에 로직을 추가할수록 컴포넌트의 크기는 빠르게 증가합니다. 그럴수록 로직들은 서로 얽히고 분리하기 점점 어려워져서 디버깅과 성능 최척화에도 어려움을 갖게 합니다.
• 아래의 예제 코드에서도 생명주기 메서드들이 꽤 많은 코드의 중복을 만들어내는 것을 볼 수 있습니다.

import React from 'react'
import './styles.css'

import { Count } from './Count'
import { Width } from './Width'

export default class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0,
      width: 0,
    }
  }

  componentDidMount() {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  increment = () => {
    this.setState(({ count }) => ({ count: count + 1 }))
  }

  decrement = () => {
    this.setState(({ count }) => ({ count: count - 1 }))
  }

  handleResize = () => {
    this.setState({ width: window.innerWidth })
  }

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

       : Window width
       : Counter functionality

• 복잡하게 얽힌 로직 뿐만 아니라 일부 로직은 생명주기 함수 내에서 중복되어있습니다. componentDidMount와 componentWillUnmount 양쪽에서 윈도우의 resize이벤트를 기준으로 동작을 커스터마이징 하고 있습니다.

3. Hooks

• 이렇게 개발자가 클래스 컴포넌트를 개발할 때 겪는 문제들을 해결하기 위해 React는 Hooks를 추가했습니다.

• Hooks는 컴포넌트의 상태와 라이프사이클 메서드를 관리할 수 있는 함수입니다. React Hooks은 다음의 항목들을 가능하게 합니다.
💡
함수형 컴포넌트에 상태를 추가합니다.
💡
componentDidMount 혹은 componentWillUnmount 와 같은 생명주기 메서드 없이도 컴포넌트의 생명주기를 관리할 수 있습니다.
💡
앱 내에 상태를 가진 로직을 여러 컴포넌트에서 재사용할 수 있게 합니다.

3.1 Hooks를 사용해 함수형 컴포넌트에 상태를 추가하는 방법

1. Sate Hook

• 상태를 관리할 수 있도록 useState 훅을 제공합니다.
• input요소 하나를 렌더링하고, 사용자의 타이핑을 상태에 업데이트하는 예제
• 클래스 컴포넌트를 사용했을때

class Input extends React.Component {
  constructor() {
    super()
    this.state = { input: '' }

    this.handleInput = this.handleInput.bind(this)
  }

  handleInput(e) {
    this.setState({ input: e.target.value })
  }

  render() {
    ;<input onChange={handleInput} value={this.state.input} />
  }
}

• useState 훅을 사용했을 때

import React, { useState } from "react";

export default function Input() {
  const [input, setInput] = useState("");

  return (
    <input
      onChange={e => setInput(e.target.value)}
      value={input}
      placeholder="Type something..."
    />
  );
}

   const [input, setInput] 
=  const [상태의 현재 값, 상태를 업데이트 할 수 있는 함수]

input == this.state.[value]
setInput == this.setState

2. Effect Hook

• useState를 통해 함수형 컴포넌트 내에서 상태를 다룰 수 있었다면, useEffect 훅을 사용하면 컴포넌트의 생명주기를 다룰 수 있습니다.
• 예로, State hook section에서 다루었던 Input 예제를 활용해보겠습니다.사용자가 input요소에 포커스를 둔 채로 타이핑을 시작하면 이 값을 콘솔에 출력하려고 합니다.

import React, { useState, useEffect } from "react";

export default function Input() {
  const [input, setInput] = useState("");

  useEffect(() => {
    console.log(`The user typed ${input}`);
  }, [input]);

  return (
    <input
      onChange={e => setInput(e.target.value)}
      value={input}
      placeholder="Type something..."
    />
  );
}

input을 useEffect hook의 의존 배열에 추가함으로써,
useEffect가 input값을 지켜보도록하게 되는 것입니다.

3.1 Custom Hooks

• React가 제공하는 빌트인 훅들

import React from "react";
import useKeyPress from "./useKeyPress";

export default function Input() {
  const [input, setInput] = React.useState("");
  const pressQ = useKeyPress("q");
  const pressW = useKeyPress("w");
  const pressL = useKeyPress("l");

  React.useEffect(() => {
    console.log(`The user pressed Q!`);
  }, [pressQ]);

  React.useEffect(() => {
    console.log(`The user pressed W!`);
  }, [pressW]);

  React.useEffect(() => {
    console.log(`The user pressed L!`);
  }, [pressL]);

  return (
    <input
      onChange={e => setInput(e.target.value)}
      value={input}
      placeholder="Type something..."
    />
  );
}

import React from "react";

export default function useKeyPress(targetKey) {
  const [keyPressed, setKeyPressed] = React.useState(false);

  function handleDown({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }

  React.useEffect(() => {
    window.addEventListener("keydown", handleDown);

    return () => {
      window.removeEventListener("keydown", handleDown);
    };
  }, []);

  return keyPressed;
}

4. 정리하며

GitHub - streamich/react-use: React Hooks — 👍

React Hooks — 👍. Contribute to streamich/react-use development by creating an account on GitHub.

https://github.com/streamich/react-use

Collection of React Hooks

A collection of custom, reusable React Hooks

https://nikgraf.github.io/react-hooks/

useHooks – The React Hooks Library

A collection of modern, server-safe React hooks – from the ui.dev team

https://usehooks.com/

• 위에서 클래스 컴포넌트를 이용해 구현했던 코드를 hook으로 리펙토링 해보겠습니다.

import React from 'react'
import './styles.css'

import { Count } from './Count'
import { Width } from './Width'

export default class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0,
      width: 0,
    }
  }

  componentDidMount() {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  increment = () => {
    this.setState(({ count }) => ({ count: count + 1 }))
  }

  decrement = () => {
    this.setState(({ count }) => ({ count: count - 1 }))
  }

  handleResize = () => {
    this.setState({ width: window.innerWidth })
  }

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

       : Window width
       : Counter functionality

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>
  );
}

       : Window width
       : Counter functionality

• 형광펜만 봐도 hook을 사용했을때 컴포넌트가 훨씬 명확하고 작은 조각으로 분리되어 가독성도 좋고, 재사용하기도 훨씬 수월한 것을 확인할 수 있습니다.

일반적인 훅에 대한 요약

• useState

• useEffect

• useContext

• useReducer

Hook의 장점과 단점

• 장점
• 코드가 간결해집니다. 생명주기와 얽히지 않으며 코드들은 관심사와 기능에 따라 분류할 수 있기 때문입니다.

//Class 컴포넌트를 사용했을 때
class TweetSearchResults extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      filterText: '',
      inThisLocation: false,
    }

    this.handleFilterTextChange = this.handleFilterTextChange.bind(this)
    this.handleInThisLocationChange = this.handleInThisLocationChange.bind(this)
  }

  handleFilterTextChange(filterText) {
    this.setState({
      filterText: filterText,
    })
  }

  handleInThisLocationChange(inThisLocation) {
    this.setState({
      inThisLocation: inThisLocation,
    })
  }

  render() {
    return (
      <div>
        <SearchBar
          filterText={this.state.filterText}
          inThisLocation={this.state.inThisLocation}
          onFilterTextChange={this.handleFilterTextChange}
          onInThisLocationChange={this.handleInThisLocationChange}
        />
        <TweetList
          tweets={this.props.tweets}
          filterText={this.state.filterText}
          inThisLocation={this.state.inThisLocation}
        />
      </div>
    )
  }
}

//Hookd을 사용했을 때
const TweetSearchResults = ({ tweets }) => {
  const [filterText, setFilterText] = useState('')
  const [inThisLocation, setInThisLocation] = useState(false)
  return (
    <div>
      <SearchBar
        filterText={filterText}
        inThisLocation={inThisLocation}
        setFilterText={setFilterText}
        setInThisLocation={setInThisLocation}
      />
      <TweetList
        tweets={tweets}
        filterText={filterText}
        inThisLocation={inThisLocation}
      />
    </div>
  )
}

• 복잡한 컴포넌트를 단순화 해줍니다.
: 자바스크립트의 클래스는 관리하기 힘들고 hot reloading과 함께 쓰기 어려우며 minifiy도 잘 되지 않습니다. 또한, 상태 로직이 있는 자바스크립트의 클래스를 사용하는 것은 여러 단계의 상속 구현을 유도하고 전체적인 복잡도를 빠르게 증가시키며 에러를 발생하기 쉽게 만들지만, 훅은 상태를 만드는 것 뿐만 아니라 React의 기능들을 클래스 없이 작성할 수 있습니다. Hook을 사용하면 상태를 가진 로직을 계속 재작성하지 않고 재사용할 수 있습니다. 에러를 발생시킬 확률을 낮추며 일반 함수를 조립해서 쓸 수 있게 해 줍니다.
훅이 구현되기 전에는 React에서 뷰가 없는 로직을 추출해내기가 어려웠지만, 이는 HOC패턴이나 render prop패턴을 사용할 때 복잡도를 증가시키는 원인이 되었습니다. 그렇지만 훅이 추가되면서 상태가 있는 로직을 언제든 자바스크립트 함수로 분리할 수 있게 되었습니다.

• 단점
• 규칙에 따라 작성해야 합니다. 정적 분석기 플러그인을 사용하지 않으면 어떤 훅이 규칙을 어기고 있는지 알기 어렵습니다.
• 올바르게 사용하기 위해 익숙하게 쓸 줄 알아야 합니다
• 잘못 쓸 수 있습니다 (예를 들어 useCallback, useMemo)