[React]hook이란?

React hooks 이란?

React hook이란 리액트 버전 16.8부터 새로 추가된 React 요소입니다. React hook을 사용해서 functional component(함수형)에서도 state상태 관리가 가능합니다. 또한 class component에서 사용하던 Life Cycle method인 componentDidMount, componentWillUnmount, componentDidUpdate 등을 함수형 컴포넌트에서도 사용 가능하게 해주었습니다.

React hook이 나온 이유?

그렇다면 나온 이유가 무엇일까요? class component로 충분히 가능한데 말이요. 그 이유는

복잡하고 쓸데없이 긴 코드

Class Component

import React, { Component } from 'react';

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

  changeCount(n) {
    this.setState({
      count: n,
    });
  }
  
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>
          <h1>{count}</h1>
          <button
            onClick={() => {
              this.changeCount(count + 1);
            }}
          >
            up
          </button>
          <button
            onClick={() => {
              this.changeCount(count - 1);
            }}
          >
            dowm
          </button>
        </div>
      </div>
    );
  }
}

export default App;

Functional Component

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  
  const changeCount = (num) => setCount(count + num)

  return (
    <>
      <div>{count}</div>
      <button onClick={changeCount(1)}>증가</button>
      <button onClick={changeCount(-1)}>감소</button>
    </>
  );
};

export default App;

함수형 컴포넌트에서는 useState를 사용해서 상태 관리를 쉽게 해 줄 수 있습니다.

로직 공유의 복잡함

hook이 나오기 전에 리액트에서는 상태 로직을 공유하기 위해 hoc(Higher-Order Components)와 render props을 사용했다.

두 개 이하 하기란 처음 보기엔 많은 시간이 걸리고 해석하 김 들었다. 또한 React.ts 사용하면 return타입을 선언하는 것 또한 힘들었습니다.

하지만 functional component에서 커스텀 훅을 사용해서 hoc을 대체할 수 있습니다.

React hook 특징

- 선택적 사용: 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 hook을 사용할 수 있습니다.

- 이전 버전과의 호환성: hook은 호환성을 깨뜨리는 변화는 없습니다.

재훈_개발일지