React Hooks란?

React v16.8에 새로 도입된 기능으로서, 함수 컴포넌트에서도 state 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수 컴포넌트에서는 불가능하던 작업들을 할 수 있도록 도와줍니다.

1. useState

useState는 가장 기본적인 Hook으로, 함수 컴포넌트에서도 클래스형 컴포넌트로 변환하는 것 없이, 상태를 관리할 수 있습니다.

Counter.js

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

useState를 사용할 때에는 import 구문을 통하여 불러온 뒤 사용해야 하며, 배열의 비구조화 할당 문법을 이용하여 value에 초기값 0을 설정해줍니다. setValue는 value의 값을 변화할 수 있도록 하는 함수입니다. 이처럼 useState를 사용하면 상태값을 관리하기 쉽습니다.

2. useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태라고 볼 수 있습니다.

#빈 배열을 넣어주면 마운트 될 때만 실행된다.
useEffect(() => {
    console.log('마운트 될 때만 실행된다');
  }, []);

#배열을 생략하면 리렌더링 될 때마다 실행된다.
  useEffect(() => {
    console.log('렌더링 될 때 마다 실행된다');
  });