[리액트] hooks

React Hooks

Hook 탄생으로 인해 function component에서 state을 가질 수 있게 되었다.

만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다.

모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것

React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다.

class component
import React, { Component } from 'react';

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

  countUpdate(n) {
    this.setState({
      count: n,
    });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <div>
          <h1>{count}</h1>
          <button
            onClick={() => {
              this.countUpdate(count + 1);
            }}
          >
            증가
          </button>
        </div>
      </div>
    );
  }
}


export default App;
hooks
import React, { Component, useState } from 'react';

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

  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
};

export default App;

useState가 바로 Hook으로 Hook을 호출해 함수 컴포넌트(function component)안에 state를 추가했습니다.

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 이 함수를 핸들러나 다른 곳에서 호출할 수 있습니다.

useState는 클래스에서 사용하는 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 존재 합니다.

jsx 표현식을 사용하여 onClick이벤트 내부에 화살표 함수를 작성하여 바로 처리할 수도 있지만 아래와 같이 함수형으로 만들수도 있습니다.

import React, { useState } from "react";

export default function App() {
  const [item, setItem] = useState(0);
  const incrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>number : {item}</h1>
      <button onClick={incrementItem}>증가</button>
      <button onClick={decrementItem}>감소</button>
    </div>
  );
}
 

useState의 인자로 무엇을 넘겨주어야 하나?
위의 예시에서 useState인자로 0을 전달한 이유는 카운터 증가를 시작할 때 0에서부터 시작하기 위해 state인 count의 초기 값을 0으로 설정한 것입니다. 만약 1부터 시작하고 싶으시다면 useState(1)로 인자 1을 전달하면 됩니다.

useState는 무엇을 반환?
state 변수, 해당 변수를 갱신할 함수 이 두 가지를 반환합니다. 가장 쉽게 클래스컴포넌트와 비교 해보도록 하겠습니다.

useState은 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다.

만일 아래와 같이 hook을 호출해 state를 추가하고 count를 0으로 초기화 했다면

const App = () => {
	const [count,setCount] = useState(0)
}
클래스 컴포넌트에서는 아래와 같음

class App extends Component {
  state = {
    count: null,
  };

  setCount() {
    this.setState({
      count: 0,
    });
  }