React setState로 상태 관리하기: 기본 개념부터 실전 예제까지

애플리케이션의 상태(state)를 추적하는 것은 싱글 페이지 애플리케이션(SPA)이 변경 사항을 감지하고 이를 사용자 화면에 렌더링하는 핵심 메커니즘입니다. 전통적인 MVC(모델-뷰-컨트롤러) 프레임워크와 달리 SPA는 페이지를 새로 불러오는 방식으로 사용자를 리다이렉트하지 않기 때문에, 클라이언트 측에서 발생하는 변경 사항을 직접 관리할 방법이 필요합니다.

React에서는 컴포넌트가 자신의 상태를 직접 관리하고, 상태가 변경될 때마다 그에 맞게 다시 렌더링(re-rendering)합니다. 이 과정은 라이프사이클 메서드를 통해 이루어지며, 이 글에서는 그중에서도 setState를 사용해 상태를 변경하는 방법에 집중해 살펴보겠습니다.

이 가이드는 React에 대한 기본적인 이해가 있다고 가정합니다. React 기초가 아직 익숙하지 않다면 공식 문서나 입문 튜토리얼을 먼저 살펴보는 것을 추천합니다.

React setState란 무엇인가?

React의 setState 메서드는 컴포넌트의 상태를 안정적으로 변경하는 공식적인 방법입니다. React에서 상태를 변경할 때는 반드시 지켜야 할 몇 가지 중요한 규칙이 있습니다.

setState는 클래스형 컴포넌트 안에서만 호출할 수 있습니다. 클래스형 컴포넌트는 constructor() 메서드를 호출하여 초기 상태를 설정하고, 이후 코드 어디에서든 setState를 호출해 상태를 변경할 수 있습니다.

참고로 React에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 종류가 있습니다. 이 글에서는 클래스형 컴포넌트를 기준으로 설명하며, 두 방식의 차이가 궁금하다면 관련 비교 자료를 참고하시면 좋습니다.
클래스형 컴포넌트 내부에서만 setState를 호출하므로, this 키워드로 컴포넌트 자신을 직접 참조할 수 있습니다. this.setState() 형태로 호출하는 것이 모범 사례이며, 이렇게 작성하면 코드가 깨질 위험 없이 안전하게 상태를 업데이트할 수 있습니다.
상태를 직접 수정해서는 안 됩니다. this.state 값을 곧바로 변경하면 React는 이를 인식하지 못해 다시 렌더링되지 않습니다. 상태를 변경하는 궁극적인 목적은 해당 컴포넌트의 재렌더링을 유발해 변경된 결과를 사용자에게 반영하는 것이기 때문입니다.

그럼 위 규칙들을 바탕으로 실제 문법을 살펴보겠습니다.

setState 문법 이해하기

첫 번째 규칙에서 확인했듯이, setState는 클래스형 컴포넌트 안에서만 사용할 수 있습니다. 예를 들어 쇼핑 앱에 장바구니 기능을 구현한다고 가정해 보겠습니다. 장바구니 역할을 담당할 Cart라는 이름의 클래스형 컴포넌트를 만들 수 있으며, 이 컴포넌트는 사용자가 상품을 추가할 때 자신의 상태를 스스로 관리하게 됩니다.

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

위 코드를 하나씩 분석해 보겠습니다. 먼저 Cart라는 클래스형 컴포넌트를 선언했습니다. 모든 클래스형 컴포넌트처럼 React.Component를 상속(extend)하며, 이는 React의 기본적인 보일러플레이트 문법입니다.

이 컴포넌트에 상태를 부여하려면 생성자(constructor) 메서드를 호출해야 합니다. 그다음 super(props)를 통해 부모 생성자를 호출합니다. 간혹 props 없이 부모 생성자를 호출하는 코드를 볼 수 있지만, React 공식 문서에서는 부모 생성자를 항상 props와 함께 호출할 것을 권장합니다.

여기까지 클래스형 컴포넌트를 구성하는 필수 문법을 마쳤으니, 이제 초기 상태를 할당할 준비가 되었습니다. 초기 상태를 직접 참조할 수 있는 유일한 순간은 바로 지금입니다. this.state = {shoppingCart: []}처럼 상태를 할당하면 장바구니의 초기 상태를 빈 배열로 설정할 수 있습니다.

React setState 실전 예제

앞서 초기 상태를 선언하는 문법을 살펴봤습니다. 생성자 메서드에서 상태가 설정되면, 이후에는 평소처럼 렌더링할 수 있습니다.

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

위 코드는 초기 상태가 설정된 Cart 클래스형 컴포넌트가 render 메서드의 반환문에서 장바구니를 화면에 출력하는 구조입니다. 이제 setState를 활용해 장바구니를 업데이트하는 방법을 살펴보겠습니다.

새로운 아이템을 추가하면서도 기존에 담겨 있던 상품들은 그대로 유지하는 함수를 정의해야 합니다. 이때 JavaScript의 스프레드 연산자(spread operator, ...)를 사용해 기존 상태를 복사한 뒤 새로운 상태로 업데이트합니다. 이렇게 하면 장바구니에는 사용자가 추가한 모든 상품이 누적되어 담기게 됩니다.

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

이렇게 만든 addItem 함수는 버튼의 onClick 속성에 연결할 수 있습니다. 그러면 사용자가 버튼을 클릭할 때마다 해당 상품이 장바구니에 추가됩니다. 다만 이 글의 목적은 함수 안에서 setState를 어떻게 활용하는지 이해하는 것이므로, 여기까지만 살펴보아도 충분합니다.

이 글은 setState의 사용법을 소개하기 위한 입문서이며, 모든 내용을 다루지는 않습니다.

마무리

이번 글에서는 setState가 무엇인지, 사용 시 지켜야 할 규칙은 무엇인지, 그리고 기본 문법과 간단한 예제까지 함께 살펴봤습니다. 이 글이 출발점이 되어, 여러분이 직접 컴포넌트의 상태를 업데이트하며 더 깊이 학습하고 연습하는 계기가 되기를 바랍니다.

React 공식 문서에는 추가적인 예제들이 잘 정리되어 있으니, 이를 활용하면 더 많은 연습 기회를 얻을 수 있습니다. 싱글 페이지 애플리케이션에서 컴포넌트의 상태를 추적하는 것은 사용자에게 변경 사항을 렌더링하기 위해 반드시 필요한 핵심 개념이라는 점을 기억하세요.