React useState로 카운터 상태 관리하기 - 가장 짧은 함수형 컴포넌트

왜 이 내용을 정리하나

React를 처음 배울 때 가장 먼저 부딪히는 개념이 상태(state)다. 일반 변수에 값을 넣고 화면을 갱신하려고 하면 화면이 바뀌지 않는 경우가 많다. 이유는 React가 렌더링 결과를 추적하는 방식과 관련이 있다. 값이 바뀌었다는 사실을 React에 알려야 컴포넌트가 다시 실행되고, 그 결과가 화면에 반영된다. 이때 쓰는 도구가 useState 훅이다.

버튼을 누르면 숫자가 올라가고 내려가는 카운터는 상태 관리의 가장 단순한 형태다. 입력 폼, 토글 버튼, 장바구니 수량 같은 기능도 구조는 같다. 값을 보관하고, 값을 바꾸는 함수를 이벤트에 연결하고, 바뀐 값을 JSX에 출력하는 흐름이다. 그래서 카운터 하나를 제대로 이해해 두면 이후의 상태 관리를 훨씬 덜 헷갈리게 다룰 수 있다. 이 노트에서는 useState로 카운터 상태를 관리하는 가장 짧은 함수형 컴포넌트 예제를 정리해 본다.

개념 설명

useState는 React가 제공하는 훅이다. 훅은 함수형 컴포넌트 안에서 React의 기능을 가져다 쓰는 함수를 뜻한다. useState를 호출하면 두 개의 값을 담은 배열이 반환된다. 첫 번째 값은 현재 상태이고, 두 번째 값은 상태를 바꾸는 함수다. 관례상 이 둘은 각각 count, setCount처럼 이름을 붙인다.

const [count, setCount] = useState(0); 구문에서 0은 상태의 초깃값이다. 컴포넌트가 처음 렌더링될 때만 이 값이 쓰인다. 이후 렌더링에서는 React가 저장해 둔 현재 값을 돌려준다. 그래서 컴포넌트 함수가 여러 번 실행되어도 count는 마지막으로 설정된 값을 유지한다.

상태를 바꿀 때는 setCount를 호출한다. setCount가 호출되면 React는 새 값을 저장하고 해당 컴포넌트를 다시 렌더링한다. 다시 렌더링된 함수에서는 새로운 count 값이 사용된다. 일반 변수에 count = count + 1을 쓰는 것과 달리, setCount를 써야 화면이 갱신된다는 점이 핵심이다.

또 하나 중요한 점은 상태 변경이 즉시 현재 변수 값을 바꾸지 않는다는 것이다. setCount(count + 1)을 호출해도 같은 렌더링 안에서 count는 여전히 이전 값이다. 새 값은 다음 렌더링에서 나타난다. 이 차이는 연속된 호출에서 문제를 일으킬 수 있으며, 뒤의 헷갈리는 점에서 다시 다룬다.

코드 예제

아래 코드는 저장소의 Counter.jsx 파일과 같은 내용이다. 증가와 감소 버튼을 가진 완전한 컴포넌트다.

import { useState } from "react";

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

  return (

현재 값: {count}

  );
}

export default Counter;

이 코드를 실행하면 화면에 현재 값 0이 출력된다. 증가 버튼을 누르면 onClick 핸들러가 setCount(count + 1)을 호출하고, count가 1 늘어난 값으로 컴포넌트가 다시 렌더링된다. 화면에는 현재 값: 1이 나타난다. 감소 버튼은 같은 방식으로 count를 1 줄인다. 값이 음수로 내려가는 것도 막지 않으므로, 최소값 제한이 필요하면 조건문을 추가해야 한다.

코드에서 주목할 부분은 onClick에 함수 형태 () => setCount(count + 1)을 넘긴다는 점이다. setCount(count + 1)을 그대로 쓰면 컴포넌트가 렌더링될 때 바로 실행되어 무한 루프가 생길 수 있다. 화살표 함수로 감싸야 클릭 이벤트가 발생했을 때만 실행된다.

파일 마지막의 export default Counter; 줄은 위에 이미 export default가 있으므로 중복이다. 실제 프로젝트에서는 한 번만 내보내는 것이 맞다. 저장소의 원본 파일 구조에 맞춰 한 가지 방식만 사용하면 된다.

헷갈리는 점

첫 번째로 헷갈리는 점은 setCount 직후의 값이다. 아래처럼 한 핸들러 안에서 두 번 호출하면 기대와 다른 결과가 나온다.

const handleDoubleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};

이 코드는 버튼을 한 번 눌러도 count가 2가 아니라 1만 증가한다. 두 호출 모두 같은 렌더링의 count 값인 0을 기준으로 1을 계산하기 때문이다. 이전 값을 기준으로 바꾸려면 함수형 업데이트를 써야 한다. setCount(prev => prev + 1)처럼 쓰면 React가 가장 최근에 예약된 값을 prev로 넘겨준다. 이 방식을 쓰면 두 번 호출했을 때 실제로 2가 증가한다.

두 번째는 상태와 일반 변수의 차이다. 컴포넌트 함수 안에서 let temp = 0; 같은 값을 만들고 바꾸는 것은 렌더링 사이에 유지되지 않는다. 화면에 반영되어야 하는 값은 반드시 useState로 관리해야 한다. 렌더링과 무관하게 값을 기억해야 할 때는 useRef를 쓰는 경우도 있지만, 이 노트의 범위를 벗어난다.

세 번째는 훅의 호출 위치다. useState는 반드시 컴포넌트 함수의 최상위에서 호출해야 한다. 조건문이나 반복문 안에 넣으면 렌더링마다 훅의 순서가 달라져 오류가 생긴다. 이것은 React가 훅을 호출 순서로 구분하기 때문이다.

정리

useState는 함수형 컴포넌트에서 값을 저장하고, 그 값을 바꾸면 화면을 다시 그리게 하는 훅이다. 배열 구조분해로 현재 값과 변경 함수를 받고, 변경 함수를 이벤트 핸들러에서 호출하는 것이 기본 패턴이다. 가장 짧은 카운터 예제는 이 흐름을 모두 담고 있어서 상태 관리의 출발점으로 적합하다.

실무에서 자주 생기는 문제는 연속된 상태 변경과 이전 값에 의존하는 업데이트에서 나온다. 이런 경우에는 함수형 업데이트를 쓰는 습관을 들이는 편이 안전하다. 다음 단계로는 객체나 배열을 상태로 다루는 방법과 여러 컴포넌트가 상태를 공유하는 방법을 이어서 보면 된다.

이 노트에서는 useState 카운터 예제의 구조, 렌더링 흐름, 흔한 실수를 정리해 보았다. 원본 코드는 https://github.com/JooSeunghyeon/study-react/tree/main/packages/react-counter-basics 에서 확인할 수 있다.

#React #useState #함수형컴포넌트 #상태관리 #훅