[React다루는기술] 05. State

in React on React 다루는 기술


React에서의 상태(State)는 컴포넌트의 데이터를 저장하고 관리하는 데 사용됩니다. 각각의 React 컴포넌트는 자체적인 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링될 때 데이터를 보관하고 관리하는 데 사용된다.


1. State

리액트에서는 state가 두가지가 있다. 하나는 클래스형 컴포넌트에 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state 이다.

그래서 클래스형 컴포넌트에서는 this.state를 사용하여 상태를 관리하고, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리한다.


[예제1] 클래스 컴포넌트 방법 State

클래스 컴포넌트에서 constructor 생성자 생성을 이용해 state 사용한 방법1

import React, { Component } from "react";

//클래스 컴포넌트
class Counter extends Component {
  constructor(props) {
    super(props);
    //state default
    this.state = {
      number: 0,
    };
  }

  render() {
    const { number } = this.state;

    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}
export default Counter;


[예제2] 클래스 컴포넌트 방법 State

클래스 컴포넌트에서 constructor 생성자 생성없이 바로 state 사용한 방법1

import React, { Component } from "react";

//클래스형 컴포넌트
class Counter3 extends Component {
  state = { number1: 0, number2: 0 };

  render() {
    const { number1, number2 } = this.state;

    return (
      <div>
        <h1>
          증가 : {number1}, 감소 : {number2}
        </h1>
        <button
          onClick={() => {
            this.setState({ number1: number1 + 1 }, () => {
              console.log("number1 변경됨", this.state.number1);
            });
            this.setState({ number2: number2 - 1 }, () => {
              console.log("number2 변경됨", this.state.number1);
            });
          }}
        >
          증감
        </button>
      </div>
    );
  }
}

export default Counter3;


[예제3] 함수형 컴포넌트 방법 useState

위에 클래스 컴포넌트 예제2를 함수형 컴포넌트 방식으로 변경한 코드이다. 살짝 상이한 부분은 useEffect라는 리액트 Hook을 이용해 변경 된 데이터 로그출력이 있을뿐 동일하다.

import React, { useState, useEffect } from "react";

//클래스형 컴포넌트
const Counter3Fn = () => {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);

  useEffect(() => {
    console.log("number1 변경됨: ", number1);
  }, [number1]);

  useEffect(() => {
    console.log("number2 변경됨: ", number2);
  }, [number2]);

  const handleButtonClick = () => {
    // setNumber1(number1 + 1);
    // setNumber2(number2 - 1);
    setNumber1((prevNumber1) => prevNumber1 + 1);
    setNumber2((prevNumber2) => prevNumber2 - 1);
  };

  return (
    <div>
      <h1>
        증가 : {number1}, 감소 : {number2}
      </h1>
      <button onClick={handleButtonClick}>증감</button>
    </div>
  );
};

export default Counter3Fn;



[출처]