[React]Hooks - useState, useEffect

Hooks

Hooks는 React v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.

---

useState

useState 사용하기

useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 다음은 useState를 사용한 숫자 카운터입니다.

import React, { useState } from "react";

const Counter = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>
        value of current counter : <b>{value}</b>
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

export dexfault Counter;

useState는 상단의 import구문을 통해 불러오고 다음과 같이 사용합니다.

const [value, setValue] = useState(0);

useState의 함수 파라미터에는 초기화할 값을 넣어줍니다. 현재는 0으로 초기화 된 상태입니다. Number, String 타입 뿐만 아니라 Object, Array형식으로도 초기화가 가능합니다.

useState 여러개 사용하기

하나의 useState는 하나의 상태 값만 관리할 수 있습니다. 따라서 컴포넌트에서 관리해야 할 상태가 여러 개라면 아래와 같이 useState를 여러 번 사용하면 됩니다.

import React, { useState } from "react";

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>name:</b> {name}
        </div>
        <div>
          <b>nickname:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

---

useEffect

useEffect 사용하기

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다. 위에서 작성한 코드를 이용해 useEffect를 적용하면 다음과 같이 작성할 수 있습니다.

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

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");
  useEffect(() => {
    console.log("useEffect");
    console.log({
      name,
      nickname,
    });
  });

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>name:</b> {name}
        </div>
        <div>
          <b>nickname:</b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

위와 같이 컴포넌트가 렌더링 될 때마다 useEffect가 호출되어 사용되는 것을 볼 수 있습니다.

useEffect 한번만 실행시키기

만약 useEffect에서 설정한 함수를 컴포넌트가 처음 렌더링 될 때만 실행하고, 업데이트 될 때는 실행하지 않으려면 함수의 두번째 파라미터로 비어있는 배열을 넣어주면 됩니다.

  useEffect(() => {
    console.log("useEffect");
    console.log({
      name,
      nickname,
    });
  }, []);

useEffect 특정 값이 업데이트 될 때만 실행하기

useEffect를 특정 값이 변경될 때만 호출하고 싶다면 다음과 같이 작성하면 됩니다. 배열안에 useState를 관리하고 있는 상태를 넣어줘도 되고 props로 전달받은 값을 넣어주어도 됩니다.

  useEffect(() => {
    console.log(name)
  }, [name]);

---