📑 [React] State

728x90

리액트(React)의 또 다른 핵심 개념인 state에 대해 알아보겠습니다.

state는 리액트 컴포넌트에서 동적인 데이터를 관리하는 데 사용되며,

컴포넌트의 상태가 변경될 때마다 UI를 다시 렌더링합니다.

이 글에서는 state가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.

State란 무엇인가?

state는 리액트 컴포넌트의 동적인 데이터를 저장하는 객체입니다. 컴포넌트는 state를 통해 자신의 상태를 관리하고, 상태가 변경되면 리액트는 자동으로 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 이는 컴포넌트의 데이터가 변할 때마다 수동으로 DOM을 조작할 필요 없이, 리액트가 효율적으로 UI를 관리할 수 있게 해줍니다.

State 사용 방법

함수형 컴포넌트에서의 State 사용

함수형 컴포넌트에서는 useState 훅(hook)을 사용하여 state를 관리합니다.

useState는 현재 상태 값과 상태를 업데이트하는 함수를 반환합니다.

import React, { useState } from 'react';

function Counter() {
  // count는 상태 값, setCount는 상태를 업데이트하는 함수
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

export default Counter;

클래스 컴포넌트에서의 State 사용

클래스 컴포넌트에서는 state를 초기화하고, setState 메서드를 사용하여 상태를 업데이트합니다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state 초기화
    this.state = {
      count: 0,
    };
  }

  // 상태 업데이트 메서드
  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.incrementCount}>카운트 증가</button>
      </div>
    );
  }
}

export default Counter;

State의 특징

비동기적 업데이트

setState는 비동기적으로 동작합니다. 이는 여러 상태 업데이트가 하나의 렌더링 사이클에서 병합될 수 있음을 의미합니다.

따라서 setState 호출 후에 바로 상태 값을 읽으면 예상한 값이 아닐 수 있습니다.

불변성 유지

state 객체는 불변성을 유지해야 합니다. 즉, 기존 상태를 직접 수정하지 않고, 새로운 상태 객체를 생성하여 업데이트해야 합니다.

이를 통해 리액트는 상태 변화 여부를 정확히 감지하고 최적의 렌더링을 수행할 수 있습니다.

// 잘못된 예시: 직접 state를 수정하면 안 됩니다.
this.state.count = this.state.count + 1;

// 올바른 예시: setState를 사용하여 새로운 상태 객체를 생성합니다.
this.setState((prevState) => ({
  count: prevState.count + 1,
}));

State의 주의 사항

상태 초기화

상태는 컴포넌트가 마운트될 때 한 번만 초기화됩니다.

따라서 상태 초기화 로직은 컴포넌트의 생명주기 메서드나 훅 내에서 적절히 처리해야 합니다.

상태 업데이트 함수 사용

상태를 업데이트할 때는 항상 이전 상태를 기반으로 업데이트하는 함수 형태로 setState를 사용하는 것이 좋습니다.

이를 통해 상태 업데이트가 비동기적으로 처리될 때 발생할 수 있는 문제를 방지할 수 있습니다.

this.setState((prevState) => ({
  count: prevState.count + 1,
}));

여러 개의 상태 업데이트

여러 개의 상태 업데이트가 동시에 발생하는 경우, 리액트는 이를 병합하여 한 번에 처리합니다.

따라서 여러 상태 업데이트를 연속으로 호출할 때는 함수형 업데이트를 사용하는 것이 안전합니다.

// 잘못된 예시: 상태 업데이트가 예상대로 동작하지 않을 수 있습니다.
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

// 올바른 예시: 함수형 업데이트를 사용하여 상태를 안전하게 업데이트합니다.
this.setState((prevState) => ({ count: prevState.count + 1 }));
this.setState((prevState) => ({ count: prevState.count + 1 }));

결론

리액트에서 state는 컴포넌트의 동적인 데이터를 관리하는 중요한 개념입니다.

함수형 컴포넌트에서는 useState 훅을, 클래스 컴포넌트에서는 state와 setState 메서드를 사용하여 상태를 관리할 수 있습니다.

상태 업데이트는 비동기적으로 처리되며, 불변성을 유지하는 것이 중요합니다.

이 글을 통해 리액트의 state 개념을 이해하고,

이를 활용하여 더 나은 사용자 인터페이스를 구현하시길 바랍니다.