React.js 기본 사용법(3) - Hook

이번 포스트에서는 Hook에 대해 알아본다.

 

React Hook은 기존에 클래스 컴포넌트에서만 사용할 수 있었던 state를 함수형 컴포넌트에서도 사용할 수 있도록 도입된 새로운 기능이다. 이를 통해 모든 컴포넌트가 함수형 컴포넌트로 대체 가능해진다.

또한, Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와주고, Hook을 통해 비슷한 기능을 묶어 컴포넌트로 나눌 수 있게 해준다.

 

그 중에서, 자주 사용되는 두가지 기능을 살펴본다.

 

1. useState

React Hook에서는 state를 만들고 state의 변경을 적용시킬 함수를 만들기 위해 useState 함수를 사용한다.

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>{number}</div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

위 코드를 통해 자세히 살펴보면 useState를 먼저 선언한다.

useState는 배열을 반환하는데 [해당 state, state 값 변경함수] = useState(초기값); 의 형태를 띈다.

따라서, number라는 state를 선언하고 이 number를 변경하는 함수인 setNumber를 선언한다. 이 때, 초기값은 숫자이므로 0으로 설정한다.

이 후, 간단한 버튼에 onClick 이벤트로 setNumber에 +,- 를 설정해준다.

실행해보면 위와 같이 초기값이 0으로 나오고, 더하기, 빼기 버튼에 따라 숫자가 변경되는 것을 확인할 수 있다.

 

2. useEffect

useEffect 함수는 기존 클래스 컴포넌트에서의 라이프 사이클 메서드들의 모음이다.

(componentDidMount + componentDidUpdate)

기본적으로 state가 변경될 때마다 실행되며, 특정 state 값을 주면, 해당 state의 변화가 있을 때만 실행이 된다.

import React, { useEffect, useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  const [msg, setMsg] = useState("");

  useEffect(() => {
    if (number > 0) {
      setMsg("양수");
    } else if (number === 0) {
      setMsg("초기값");
    } else {
      setMsg("음수");
    }
  }, [number]);
  return (
    <div>
      <div>
        {number}: {msg}
      </div>
      <button onClick={() => setNumber(number + 1)}>더하기</button>
      <button onClick={() => setNumber(number - 1)}>빼기</button>
    </div>
  );
};

export default App;

위와 같이 msg state를 선언하고 useEffect에 number state에 따라 실행되게끔 배열안에 number를 넣어준다. 그 후, 조건에 맞게 setMsg를 통해 메세지를 설정해주면 각 숫자값에 따라 메세지가 출력된다.

 

---

 

다음 포스트에서는 이벤트 처리에 대해 알아본다.