REACT - HOOK 이란?

 HOOK은 React 버전 16.8부터 React 요소로 새로 추가 되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 

 리액트에서 HOOK을 사용하는 이유는 functional component 에서 state를 가질 수 있게 합니다. 기존의 react 에서는 class component, did mount, render 이런것을 안해도 된다. 모든 것은 하나의 function 이 된다. 함수형 프로그래밍으로 모든 것을 할 수 있습니다.

 

HOOK의 장점

클래스 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.

-> Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어줍니다.

복잡한 컴포넌트들은 이해하기 어렵습니다.

 componentDidMount 와 componentDidUpdate는 컴포넌트안에서 데이터를 가져오는 작업을 수행할 때 사용 되어야 하지만, 같은 componentDidMount에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 하며, componentWillUnmount에서 cleanup 로직을 수행하기도 합니다. 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.


 이같은 문제를 해결하기위해, 생명주기 메서드를 기반으로 쪼개는 것 보다는, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 또한 이러한 로직의 추적을 쉽게 할 수 있도록 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있습니다.


Class은 사람과 기계를 혼동시킵니다.

 React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 합니다. JavaScript의 this키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만들고는 했습니다. 또한 class의 사용을 위해 이벤트 핸들러가 등록되는 방법을 정확히 파악해야 했으며, 이는 불안정한 문법 제안들의 도움이 없을 시엔, 코드를 매우 장황하게 만들었습니다. 사용자들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 하고도, Class의 이해에는 어려움을 겪고는 했습니다. React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등은 숙련된 React 개발자 사이에서도 의견이 일치하지 않습니다.

 이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시합니다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hook은 React의 정신을 희생하지 않고 함수의 사용을 권장합니다. Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다.

 

HOOK의 역사

HOOK의 역사는 recompose 부터 시작 되었다. recompose 는 리액트팀으로 인수되었고 recompose + 리액트 팀으로 인수 훅을 만들게 되었습니다.

https://github.com/acdlite/recompose

GitHub - acdlite/recompose: A React utility belt for function components and higher-order components.

 

HOOK 사용법

기존의 class component 를 사용하는 react 방식은 아래와 같습니다. setState 를 통하여 값을 제어 했습니다.

import "./style";
import { Component, render } from "preact";

export default class App extends Component {
  state = {
    count: 0
  };

  modify = (n) => {
    this.setState({
      count: n
    });
  };
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}> Increment</button>
      </div>
    );
  }
}

if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

 

아래는 useState 라는 훅을 사용 하였으며 useState 는 리액트 훅 중에 하나입니다. 훅을 사용하면 함수형 프로그래밍으로 아래처럼 작성 할 수 있습니다.

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

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      {count}
      <p></p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

export default App;

 

class component 에서는 state scope 를 만들고 함수에서 제어를 할때 setState 를 호출했어야 하는데 위의 코드 처럼useState 훅을 사용하면 간편하게 처리 할 수 있습니다.

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

import "./styles.css";

function App() {
  // 첫번째는 값, 두번째는 값을 설정한다.
  const [count, setCount] = useState(0);
  const incrementItem = () => setCount(count + 1);
  const decrementItem = () => setCount(count - 1);
  return (
    <div className="App">
      {count}
      <p></p>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
}

export default App;

 

Reference

Hook의 개요 – React