React Hooks 살펴보기 사용기

vue만 사용하던 나로서는 hook이란는 개념 자체가 생소했다.

클래스형 컴포넌트를 접한지 얼마 안되기도 했는데 함수형 컴포넌트라니.

 

그래서 이번엔 hook에 대해 알아보겠다.

 

React Hooks란?

리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉩니다.

간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다.

 

클래스형 컴포넌트 단점

1. 계층이 너무 많아지는 단점.

2. Component가 복잡해진다.

3. Class를 Component로 쓰면 constructor, this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어집니다.

이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사용하는 사람은 사용하기 어려워진다.

 

결국 클래스형 컴포넌트를 사용하면 가독성이 떨어지는 가장큰 단점이 있다.

이 단점을 보완하기 위해 사용하는것이 react hooks이다.

 

 결국 react hooks은 클래스(Class) 형태였던 Component를 함수(function)을 통해 만들 수 있게 해주는 API이다. 

 

React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다.

useState()와 useEffect()가 바로 그것이다. 

 

useState는 state관리에 사용되어지고 useEffect는 lifecycle관리에 사용되어진다.

 

 

예제

 

 

클래스형 컴포넌트(Class Component)

import React from "react";

class App extends React.Component {
  state = {
      number: 0
  };
  render() {
    return (
      <div style={{ "textAlign": "center" }}>
        <div style={{ "fontSize": "100px" }}>{this.state.number}</div>
        <button onClick={this.handleClickIncrement}>더하기</button>
        <button onClick={this.handleClickDecrement}>빼기</button>
      </div>
    );
  }
  handleClickIncrement = () => {
    this.setState(state => ({
      number: state.number + 1
    }));
  };
  handleClickDecrement = () => {
    this.setState(state => ({
      number: state.number - 1
    }));
  };
}

export default App;

숫자를 다루기 위해 컴포넌트에 state을 선언하고

더하는 함수 handleClickIncrement에서도 this.setState() 메소드를,

빼는 함수 handleClickDecrement에서도 this.setState() 메소드를 사용했습니다.

 

 

함수형 컴포넌트(Functional Component)

리액트 훅의 useState을 사용

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: "100px" }}>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

클래스형 컴포넌트에서 setState을 사용하여 state을 변경할 때에는 shallow copy로 인해 항상 새로운 객체를 생성해서 전달해줘야하는 불편함이 있었는데,

useState을 사용하여 얻은 함수(setNumber)에서는 원하는 값을 인자로 전달하기만하면 됩니다.