[4] React State

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다.

 

React State란 무엇인가?

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다.
(state가 변경되면 컴포넌트는 리랜더링(Re-rendering)되고, state는 컴포넌트 안에서 관리됩니다.

 

State의 특징

1. 컴포넌트 내부에서 관리됨
   • State는 React 컴포넌트의 "내부 상태"로, 해당 컴포넌트에서만 접근하거나 변경할 수 있습니다.
   • Props와 달리 부모 컴포넌트로부터 값을 받지 않고, 컴포넌트 자체에서 정의하고 관리합니다.
2. 값 변경 시 UI 자동 업데이트
   • setState (클래스형 컴포넌트) 또는 상태 업데이트 함수(함수형 컴포넌트)를 사용하면 React가 변경된 state 값을 기반으로 UI를 다시 렌더링합니다.
3. 비동기적 업데이트
   • React에서 state 업데이트는 비동기로 처리될 수 있어 바로 업데이트된 값을 읽으려고 하면 예상과 다른 결과가 나올 수 있습니다.
   • 이를 위해 콜백 함수나 useEffect와 같은 훅을 사용해 변화를 감지합니다.
4. 직접 수정 금지
   • State를 직접 수정하면 안 됩니다. this.state.count = 1 같은 코드는 동작하지 않으며, 반드시 setState 또는 useState를 사용해야 합니다.

 

State 사용 방식

React 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 각각의 state 사용 방식을 알아봅시다.

1. 함수형 컴포넌트 (Hooks 사용)

React 16.8부터 도입된 useState 훅은 함수형 컴포넌트에서 state를 사용할 수 있게 해줍니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값은 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

• useState는 배열을 반환하며, 첫 번째 값은 state 변수, 두 번째 값은 state를 업데이트하는 함수입니다.
• setCount를 호출하면 React는 컴포넌트를 다시 렌더링합니다.

 

2. 클래스형 컴포넌트

클래스형 컴포넌트에서는 **this.state**와 **this.setState**를 사용해 state를 관리합니다.

import React, { Component } from 'react';

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

  handleIncrease = () => {
    this.setState({ count: this.state.count + 1 }); // state 업데이트
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrease}>Increase</button>
      </div>
    );
  }
}

export default Counter;

• this.state로 상태 값을 정의하고, this.setState를 호출해 값을 변경합니다.
• 업데이트 후 React는 UI를 다시 렌더링합니다.

 

State와 Props의 차이

특징	State	Props
데이터 소유	컴포넌트 내부에서 관리됨	부모 컴포넌트에서 전달됨
변경 가능 여부	변경 가능 (setState / useState 사용)	변경 불가 (읽기 전용)
용도	동적인 데이터, 컴포넌트의 상태 관리	컴포넌트 간 데이터 전달