[React] (리액트 공부하기 12) state

젼이·2025년 1월 7일

React

리액트 정복하기

목록 보기

12/36

리액트를 공부 할 때 state가 왜 중요한지, 그리고 리액트를 사용하는 사람이라면 왜 알아야 하는지 궁금하였다.

1. state란 무엇인가?

state는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하기 위한 객체이다.

특징:

컴포넌트의 현재 상태를 나타낸다.
컴포넌트 내부에서 데이터가 변하면 화면(UI)를 자동으로 다시 렌더링하도록 도와준다.
React에서는 setState() 또는 useState()를 통해 state를 변경해야 한다.

2. props와 state의 차이

props	state
부모 컴포넌트에서 자식 컴포넌트로 전달 됨	컴포넌트 내부에서 관리 됨
변경할 수 없음(읽기 전용)	변경 가능(useState 또는 setState로)
컴포넌트 외부에서 제어 됨	컴포넌트 내부에서 제어 됨

3. state가 필요한 이유

(1) 동적인 UI를 만들기 위해

단순히 정적인 텍스트나 이미지만 보여주는 것이 아니라, 사용자와의 상호작용에 따라 화면이 변해야 하는 경우에 state가 필요하다.

예: 좋아요 버튼

사용자가 "좋아요" 버튼을 누르면 버튼 색상이 변경되거나, 좋아요 수가 증가해야 한다.
이 데이터(좋아요 여부, 좋아요 수)는 state로 관리 된다.

4. state 사용 예제

(1) 기본 예제: 좋아요 버튼

import React, { Component } from "react";

class LikeButton etends Component {
 constructor(props) {
  super(props);
   // state 초기값 설정
   this.state = {
     liked: false,
   };
 }
  
 toggleLike = () => {
   // setState를 통해 state 값 변경
   this.setState({ liked: !this.state.liked });
 };
  
 render() {
  return (
    <button onClick={this.toggleLike}>
      {this.state.liked ? "좋아요 취소" : "좋아요"}
    </button>
   );
 }
}

export default LikeButton;

5. state의 특징

(1) state는 직접 수정하면 안 된다.

잘못된 방법:

this.state.lied = true; // 이렇게 직접 수정하면 안 된다.

올바른 방법:

this.setState( { liked: true } );

setState를 사용해야 리액트가 변경 사항을 감지하고 화면을 다시 렌더링 한다.

(2) 초기값 설정

클래스 컴포넌트에서는 constructor에서 초기값을 설정한다.
함수형 컴포넌트에서는 useState를 사용한다.

import React, { useState } from "react";

function LikeButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button onClick={ () => setLiked(!liked) }>
      {liked ? "좋아요 취소" : "좋아요" }
    </button>
  );
}