리액트(React)를 활용해 동적인 웹 애플리케이션을 만들 때 가장 처음 마주하는 벽이 있습니다. 바로 사용자의 클릭이나 입력에 따라 화면이 실시간으로 변하게 만드는 일입니다. 자바스크립트에서는 변수의 값을 바꾸고 화면의 DOM을 직접 수정했지만, 리액트에서는 전혀 다른 방식을 사용합니다.

이때 핵심이 되는 개념이 바로 리액트 상태 관리(State Management)입니다. 리액트는 화면의 상태가 변하면 이를 감지하여 자동으로 화면을 다시 그려주는 영리한 라이브러리이기 때문입니다. 이러한 상태 관리를 가장 쉽고 직관적으로 시작할 수 있게 돕는 도구가 바로 useState 훅(Hook)입니다.

상태(State)란 무엇일까? 일반 변수와의 결정적 차이

상태란 쉽게 말해 '시간이 지나면서 변할 수 있는 동적인 데이터'를 의미합니다. 쇼핑몰 장바구니에 담긴 상품의 개수, 로그인한 사용자의 이름, 토글 버튼의 온·오프 여부 등이 모두 상태에 해당합니다. 일반 자바스크립트 변수도 값을 바꿀 수 있지만, 왜 굳이 리액트에서는 특별한 상태를 관리해야 할까요?

가장 큰 차이는 바로 '화면 갱신(Rendering)'에 있습니다. 일반적인 변수는 값을 아무리 변경해도 리액트가 그 변화를 눈치채지 못해 화면을 다시 그리지 않습니다. 반면, useState를 통해 관리되는 상태는 값이 변경되는 순간 리액트가 화면을 자동으로 새로고침하듯 다시 렌더링해 줍니다. 덕분에 개발자는 복잡하게 화면 수정 코드를 작성할 필요 없이, 데이터만 안전하게 관리하면 됩니다.

useState의 기본 구조와 동작 방식 이해하기

리액트에서 useState를 사용하는 방법은 무척 간단하고 정형화되어 있습니다. 컴포넌트 내부에서 함수를 호출하듯 선언하며, 하나의 상태를 다루기 위해 항상 두 가지 요소를 짝지어 반환받습니다. 바로 현재 상태의 값을 담는 변수와, 이 값을 안전하게 수정해 주는 '상태 변경 함수'입니다.

• 상태 변수(State): 현재 화면에 보여줄 실제 데이터 값을 가지고 있습니다.
• 상태 변경 함수(Setter): 이 함수를 통해서만 상태 값을 변경해야 리액트가 화면을 다시 그려줍니다.

예를 들어 const [count, setCount] = useState(0);처럼 사용한다면, count는 현재 숫자 상태를 나타내고 setCount는 이 숫자를 바꾸는 열쇠가 됩니다. 최초에 괄호 안에 넣은 값은 상태의 초기값으로 설정됩니다. 직접 변수를 수정하는 count = 5 같은 방식은 리액트에서 엄격히 금지된다는 점을 기억해야 합니다.

이벤트 핸들링과 결합하여 생동감 넘치는 화면 만들기

상태는 혼자 존재할 때보다 사용자의 행동과 결합할 때 진정한 가치를 발휘합니다. 사용자가 버튼을 클릭하거나 텍스트를 입력하는 등의 상호작용을 처리하는 과정을 이벤트 핸들링(Event Handling)이라고 부릅니다. 리액트에서는 이벤트 핸들러 내부에서 상태 변경 함수를 호출하여 화면을 동적으로 움직이게 합니다.

클릭할 때마다 숫자가 늘어나는 카운터를 만든다고 가정해 보겠습니다. 버튼 엘리먼트에 onClick 이벤트를 연결하고, 이벤트가 발생할 때마다 앞서 정의한 setCount(count + 1)을 실행하게 만듭니다. 사용자가 버튼을 누르면 이 이벤트 핸들러가 동작하고, 상태가 업데이트되면서 화면 속 숫자도 즉각적으로 바뀌게 됩니다. 이처럼 상태 관리와 이벤트 핸들링은 뗄래야 뗄 수 없는 단짝과 같습니다.

초보 개발자가 자주 실수하는 useState 주의점 2가지

첫째로, 리액트의 상태 변경은 비동기적으로 처리됩니다. 상태를 바꾼 직후에 바로 다음 줄에서 콘솔 로그를 출력해 보면, 값이 아직 바뀌지 않은 채 이전 값을 보여주는 현상을 겪게 됩니다. 리액트는 성능 최적화를 위해 여러 상태 변경 요청을 모아서 한 번에 처리하므로, 상태 변경 직후의 동작을 제어할 때는 주의가 필요합니다.

둘째로, 객체나 배열 같은 참조형 데이터를 상태로 다룰 때는 반드시 '불변성'을 지켜야 합니다. 기존 객체의 내부 값을 직접 수정하는 것이 아니라, 기존 값을 복사한 새로운 객체를 만들어 상태 변경 함수에 전달해야 합니다. 리액트는 메모리 주소값의 변화로 상태 변경을 감지하기 때문에, 기존 데이터를 직접 수정하면 화면이 새로 그려지지 않는 오류가 발생합니다.

결론: 상태 관리는 리액트 개발의 출발점

지금까지 리액트의 핵심이자 시작점인 useState에 대해 깊이 있게 알아보았습니다. 일반 변수와의 차이점부터 시작해 구체적인 사용법, 그리고 필수적인 이벤트 핸들링과의 유기적 결합까지 다루었습니다. 화면의 변화를 스스로 감지하고 최적의 타이밍에 그려내는 리액트의 매력을 느끼기에 가장 좋은 도구입니다.

요즘 트렌드에 맞는 복잡한 웹 서비스를 제작하더라도 결국 그 중심에는 이러한 작은 상태 조각들이 모여 전체 애플리케이션을 완성하게 됩니다. 가벼운 카운터 기능부터 시작해 입력 폼, 다크 모드 전환 등 다양한 실습을 직접 구현해 보며 상태 관리의 기본기를 튼튼히 다져나가길 권장합니다.