React에서 useState로 카운터 만들기

 

React는 동적인 UI를 만들기 위한 훌륭한 도구이며, 상태 관리는 React 애플리케이션 개발에서 중요한 부분입니다. 상태 관리를 위해 가장 기본적으로 사용하는 Hook 중 하나가 바로 useState입니다. 이 글에서는 useState를 사용해 간단한 카운터 애플리케이션을 만드는 방법을 알아보겠습니다.

---

1. useState란?

useState는 함수형 컴포넌트에서 상태를 추가할 수 있도록 도와주는 React Hook입니다. 다음과 같은 특징을 가지고 있습니다:

• 상태 값과 상태 업데이트 함수를 반환합니다.
• 초기 상태를 설정할 수 있습니다.
• 상태가 업데이트되면 컴포넌트가 다시 렌더링됩니다.

useState 문법:

const [state, setState] = useState(initialState);

• state: 현재 상태 값
• setState: 상태를 업데이트하는 함수
• initialState: 초기 상태 값

---

2. 기본 카운터 컴포넌트 만들기

2.1 카운터 컴포넌트 작성하기

카운터 컴포넌트는 숫자 상태를 관리하고, 증가 및 감소 버튼으로 상태를 변경할 수 있는 간단한 컴포넌트입니다. 다음은 기본적인 코드입니다:

import React, { useState } from 'react';

function Counter() {
  // useState를 사용해 상태 정의
  const [count, setCount] = useState(0);

  // 증가 함수
  const increment = () => setCount(count + 1);

  // 감소 함수
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Counter</h1>
      <p>Current Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

2.2 주요 코드 설명

• useState(0): 초기 상태를 0으로 설정.
• setCount: 상태를 업데이트하기 위한 함수.
• onClick 이벤트 핸들러로 increment와 decrement 함수를 연결.

2.3 결과 화면

위 코드를 실행하면 다음과 같은 기능을 가진 카운터 컴포넌트를 볼 수 있습니다:

1. 현재 카운트가 화면에 표시됩니다.
2. + 버튼을 누르면 카운트가 1 증가합니다.
3. - 버튼을 누르면 카운트가 1 감소합니다.

---

3. 고급 기능 추가하기

카운터를 더 확장하여 초기화 버튼과 사용자 정의 증감 값을 추가할 수 있습니다.

3.1 초기화 버튼 추가

카운트를 초기값으로 되돌리는 기능을 추가해봅시다:

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  return (
    <div>
      <h1>Counter</h1>
      <p>Current Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

3.2 사용자 정의 증감 값 설정

사용자가 입력한 값만큼 카운트를 변경하도록 기능을 추가할 수 있습니다:

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  const increment = () => setCount(count + step);
  const decrement = () => setCount(count - step);

  return (
    <div>
      <h1>Counter</h1>
      <p>Current Count: {count}</p>
      <div>
        <label>
          Step: 
          <input
            type="number"
            value={step}
            onChange={(e) => setStep(Number(e.target.value))}
          />
        </label>
      </div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

3.3 주요 코드 설명

• step 상태: 증감 간격 값을 관리합니다.
• onChange 이벤트: 사용자가 입력한 값을 상태로 저장합니다.
• Number(e.target.value): 입력값을 숫자로 변환하여 상태에 저장.

---

4. 최적화 팁

4.1 useCallback 사용

상태 업데이트 함수를 useCallback으로 감싸서 불필요한 렌더링을 방지할 수 있습니다:

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

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

  const increment = useCallback(() => setCount((prev) => prev + 1), []);
  const decrement = useCallback(() => setCount((prev) => prev - 1), []);

  return (
    <div>
      <h1>Counter</h1>
      <p>Current Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

4.2 상태 저장 및 복원

로컬 스토리지를 사용해 상태를 저장하고 복원할 수도 있습니다:

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

function Counter() {
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    return savedCount ? Number(savedCount) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Counter</h1>
      <p>Current Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

---

5. 결론

React의 useState를 사용하면 간단하면서도 강력한 상태 관리가 가능합니다.

• 기본적인 카운터 컴포넌트를 작성하는 방법을 배웠습니다.
• 초기화 버튼과 사용자 정의 증감 값을 추가해 기능을 확장해 보았습니다.
• useCallback과 로컬 스토리지를 활용한 최적화 방법도 알아보았습니다.

이제 여러분도 useState를 활용해 다양한 애플리케이션을 만들어 보세요!