Hook을 공부해보자!🌷

Hook 이란?

우선, 컴포넌트에는 두가지 형태의 컴포넌트가 있다.
class component 와 functional component 이다.
class component는 state를 가지지만
funtional component는 state를 가지지 못한다.

하지만 Hook은 function 안에서 React state를 사용할 수 있게 한다!

class component에서는 생명 주기 메서드가 있다. life cycle에 대해서 다룬 적이 있는데 복잡한 구조를 가지고 있다. 작게 분리하기도 어렵고 테스트하기도 어렵다.
Hook을 통해서 비슷한 기능을 하는 작은 함수를 묶어서 컴포넌트를 나누는 방법을 사용할 수 있다!

useState

함수 컴포넌트를 사용하다가 state가 필요할 때 class로 바꿀 필요가 없다!
useState를 이용하자!

import React, { useState } from "react";

export default function App() {
  const [item, setItem] = useState(1);
  const IncrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={IncrementItem}>Increment</button>
      <button onClick={decrementItem}>decrement</button>
    </div>
  );
}

다음 코드는 Increment 버튼을 누르면 item에서 +1이 된다.
const [item,setItem] = useState(1)
은 각각 this.state.item, this.setState 와 같은 기능을 한다.
Hook을 사용하면 코드가 무척 간결해진다.
class로 다시 코드를 짜보면...

class Appclass extends React.Component {
  state = {
    item: 1
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Hello {item}</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.IncrementItem}>Increment</button>
        <button onClick={this.decrementItem}>decrement</button>
      </div>
    );
  }

  IncrementItem = () => {
    this.setState((state) => {
      return { item: state.item + 1 };
    });
  };
  decrementItem = () => {
    this.setState((state) => {
      return { item: state.item - 1 };
    });
  };
}

훨씬 복잡하다..😭

지금까지 state를 사용하기 위해 class component를 자주 사용했었는데,
hook을 공부하면서 functional component를 손에 익도록 사용해봐야겠다!✨✨

참조

React 문서
노마드 코더 hook 강의