React의 useState, useEffect 사용법

semin Ryu·2023년 12월 1일

안녕하세요.

리액트 프로젝트에서 자주 사용하였던 useState와 useEffect의 사용법에 대해 알아보겠습니다.

useState

useState 기본 사용법

useState() 함수는 함수형 컴포넌트에서 상태를 관리할 수 있게 도와주는 React Hook 입니다.

useState의 기본 형태는 아래와 같습니다.

const [상태, 상태변경 함수] = useState(초기값);

useState() 함수는 하나의 인자를 받으며, 이 인자는 상태의 초기값을 나타냅니다.
useState는 배열을 반환하며, 이 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 변경하는 함수입니다.

다음은 useState를 사용하는 기본적인 예시입니다:

import React, { useState } from 'react';

function Counter() {
  const [value, setValue] = useState(0); // 0은 초기값.

  return (
    <div>
      <p>현재 값은 {value} 입니다.</p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
}

export default Counter;

위 예제에서는 useState(0)을 통해 value라는 상태를 만들고 초기값을 0으로 설정하였습니다. 그리고 버튼을 클릭할 때마다 setValue 함수를 통해 value의 값을 더하거나 빼서 갱신하고 있습니다.

useState의 동작 방식과 주의사항

그러나 useState를 사용할 때 주의해야 할 점이 있습니다. useState로 상태를 갱신하는 작업은 비동기적으로 이루어지며, 이로 인해 값이 항상 바로바로 갱신되지 않을 수 있습니다.

예를 들어, 아래와 같은 코드에서는 의도한 대로 동작하지 않을 수 있습니다:

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

setValue(value + 1);
setValue(value + 1);
setValue(value + 1);

console.log(value); // 출력값: 0

위 코드에서는 value가 3이 출력된다고 생각할 수 있지만, 실제로는 0이 출력됩니다. 이는 setValue 함수 호출이 비동기적으로 이루어지기 때문입니다.

이렇게 함수 호출이 비동기적으로 이루어 지기 때문에, 개발을 진행할 때 서버로부터 받아온 값을 useState를 사용하여 저장하여도 값이 제대로 담기지 않아 코드가 제대로 실행되지 않는 경우가 많이 발생하였습니다.

useState 사용 시 주의사항 해결방법

이러한 문제를 해결하기 위해서는, setValue 함수에 함수를 인자로 전달하는 방법을 사용할 수 있습니다. 이 함수는 이전 상태 값을 매개변수로 받아 새로운 상태 값을 반환합니다.

다음은 이를 적용한 코드 예시입니다:

setValue(prevValue => prevValue + 1);
setValue(prevValue => prevValue + 1);
setValue(prevValue => prevValue + 1);

이렇게 하면, 세 번의 setValue 호출 후에 value는 3이 됩니다. 이 방법을 통해 useState의 비동기적인 동작으로 인한 문제를 해결할 수 있습니다.

useEffect

useEffect 기본 사용법

useEffect() 함수는 React 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 React Hook입니다.

useEffect의 기본 형태는 아래와 같습니다.

  useEffect(() => {
    console.log('Hello!!');
  }, [의존성 배열]);

의존성 배열은 선택적으로, 의존성 배열이 비어 있으면 useEffect 내의 함수는 컴포넌트가 렌더링될 때 한 번만 실행되고, 그 이후에는 실행되지 않습니다. 의존성 배열에 값을 넣는다면, 그 값이 변경될 때마다 useEffect 내의 함수가 실행됩니다.

useEffect의 동작 방식과 주의사항

useEffect Hook은 기본적으로 렌더링이 완료된 이후에 실행됩니다. 이는 브라우저가 렌더링을 끝낸 후에 JavaScript가 실행되므로, useEffect 내의 함수가 실행될 때 화면이 깜빡이는 현상을 방지할 수 있습니다.

그러나 이는 useEffect 내에서 상태를 변경하면, 그 변경이 다음 렌더링에 반영되어 불필요한 렌더링이 발생할 수 있습니다. 이를 방지하기 위해 의존성 배열을 사용하는데, 이 배열에는 useEffect에서 사용하는 상태나 prop을 넣으면 이 값들이 변경될 때만 useEffect 내의 함수가 실행됩니다.

다음은 의존성 배열을 사용하는 예시입니다:

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

function ClickCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`현재 버튼을 ${count}번 클릭하였습니다.`);
  }, [count]); // count 값이 변경될 때마다 console.log가 실행됩니다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default ClickCounter;