React Hook이란?

• 동일한 기능을 수행하는 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은?

import React, { Component } from 'react';

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

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <li className="habit">
        <span className="habit-name">Reading</span>
        <span className="habit-count">{this.state.count}</span>
        <button
          className="habit-button habit-increase"
          onClick={this.handleIncrement}
        >
          <i className="fas fa-plus-square"></i>
        </button>
      </li>
    );
  }
}

export default SimpleHabit;

import React, { useState } from 'react';

const SimpleHabit = () => {
  ****const [count, setCount] = useState(0);

  ****const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <li className="habit">
      <span className="habit-name">
        Reading
      </span>
      <span className="habit-count">{count}</span>
      <button className="habit-button habit-increase" onClick={handleIncrement}>
        <i className="fas fa-plus-square"></i>
      </button>
    </li>
  );
};

export default SimpleHabit;

• 어떤 코드가 더 보기 편하신가요? 그 이유는?

React Hook이 필요한 이유

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

   • React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 합니다.
   • 사용자들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 하고도, Class의 이해에는 어려움을 겪고는 했습니다.

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

   • 각 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 합니다.

     React Lifecycle Methods diagram

   • 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.

     import React, { Component } from 'react';
     
     class SimpleHabit extends Component {
       state = {
         count: 0,
       };
     
       handleIncrement = () => {
         this.setState({ count: this.state.count + 1 });
       };
     
     	**componentDidMount() {
         console.log("SimpleHabit 컴포넌트가 화면에 보입니다!");
         document.title = this.state.count;
       }
     
       componentDidUpdate() {
         console.log("SimpleHabit 컴포넌트가 업데이트 되었습니다!");
         document.title = this.state.count;
       }**
     
       render() {
         return (
           <li className="habit">
             <span className="habit-name">Reading</span>
             <span className="habit-count">{this.state.count}</span>
             <button
               className="habit-button habit-increase"
               onClick={this.handleIncrement}
             >
               <i className="fas fa-plus-square"></i>
             </button>
           </li>
         );
       }
     }
     
     export default SimpleHabit;
     

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

   • Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다.
   • 이를 이용해 독립적인 테스트와 재사용이 가능합니다.
   • Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. (Custom Hook)

Hook의 장점

• 기존의 클래스 컴포넌트가 갖고 있던 복잡성, 재사용성과 같은 단점이 해결됩니다.
• 컴포넌트의 함수가 많아질 때 클래스 구성요소로 리팩토링 할 필요가 없습니다.
• UI에서 로직을 더 쉽게 분리하여 두 가지 모두 재사용 가능합니다.
• 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다.
• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화가 가능합니다.