Hook을 사용하는 이유

Hook을 사용하는 이유는 단순하게 말하면 코드가 간결해지고 가독성이 좋아지기 때문이다. 아래 예시를 통해 함수형 컴포넌트(Hook)와 이전에 사용했던 class component를 비교해보자.

함수형 컴포넌트 (Hook 사용)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위 코드에서 useState Hook을 사용하여 count라는 상태값과 setCount라는 상태 변경 함수를 정의합니다. increment 함수는 setCount를 호출하여 count 값을 증가시킵니다.

Class Component

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props); // Component 클래스의 생성자(Constructor)를 호출하고, props를 인자로 전달하는 역할.
    this.state = { count: 0 };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
  	/*
   render 메서드는 컴포넌트의 UI를 생성하고 반환하는 역할을 합니다. 
   render 메서드는 컴포넌트의 상태나 속성(props)이 변경되었을 때 호출되며, 
   UI를 새로 생성하여 화면에 렌더링합니다.
	*/
  

}

위 코드에서 Class Component인 Counter는 constructor 메서드를 사용하여 초기 상태값인 count를 정의하고, increment 메서드에서 this.setState를 호출하여 count 값을 증가시킵니다.

두 예시는 카운터 값을 증가시키는 기능을 구현하고 있습니다. 함수형 컴포넌트에서는 useState Hook을 사용하여 상태값을 선언하고, 클래스형 컴포넌트에서는 this.state와 this.setState를 사용하여 상태값을 관리합니다. 함수형 컴포넌트에서의 코드는 간결하고 가독성이 좋으며, 클래스형 컴포넌트보다 더욱 간편하게 상태값을 관리할 수 있습니다.

실제로 이 Counter 컴포넌트를 사용하려면 다른 부모 컴포넌트에서 렌더링하면 됩니다. 예를 들어, App 컴포넌트에서 Counter 컴포넌트를 사용하는 예시를 보겠습니다

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Counter Example</h1>
      <Counter />
    </div>
  );
}

export default App;

위의 예시에서는 App 컴포넌트에서 Counter 컴포넌트를 렌더링하고 있습니다. 이렇게 하면 Counter 컴포넌트 내부의 render 메서드가 호출되어 화면에 컴포넌트를 그립니다. 초기 카운트 값은 0으로 설정되며, 버튼을 클릭하면 increment 메서드가 호출되어 카운트가 증가하고 화면이 다시 렌더링됩니다.