Class vs Hook

React Hook 개요

• Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다.
  Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이
  상태값(state)과 여러 React의 기능을 사용할 수 있다.
• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.
  이를 이용해 독립적인 테스트와 재사용이 가능하다.
  Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
  이는 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어준다.

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

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

Hook이 뭔가요?

• Hook : 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을
  “연동(hook into)“할 수 있게 해주는 함수
• Hook은 class 안에서는 동작하지 않는다.

코드 비교

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

리액트 훅(react hook)이란? - 클래스형 컴포넌트와 비교

• 리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉜다.
• 기존 개발방식 : 일반적으로 함수형 컴포넌트를 주로 사용하되 state나 Life cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용
  • 이유는 클래스형 컴포넌트가 함수형 컴포넌트에 비해 가지는 단점 때문
  1. 코드가 길고 복잡
  2. 로직의 재사용이 어려움
     • Hook을 활용한 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후,
       필요한 곳에 집어넣기만 하면 되기 때문에 로직의 재사용이 가능
  3. 성능
• 위 단점에도 불과하고 클래스형 컴포넌트를 사용했던 이유는 state 관리와 Life cycle method의 사용 때문
• Hook의 등장으로 인해 함수형 컴포넌트에서도 이러한 클래스형 컴포넌트의 작업이 가능해짐.
  기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결!
  + React를 함수 중심으로 사용