State

• React에서 데이터를 동적으로 다루기 위해 사용한다.
  • 계속해서 변화하는 상태를 관리하기 위함이다. 상태에 따라 다른 동작을 한다!
• State는 값이 변경될 시 자동으로 재렌더링이 된다. (변수와 다르다.)
• 바뀌는 내용이 있다면 렌더링이 다시 되어야한다. 그런데 파일 전체가 재렌더링 되는 것은 비효율적이다. State를 통해 효율적으로 상태를 관리하는 것이다.

state 와 props 의 차이?

• state
  • 특정 컴포넌트가 가지고 있는 상태(값)을 의미한다.
  • 컴포넌트 내부에서 선언되고 내부에서만 값을 변경한다.
• props
  • 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 시에 사용한다. 단 방향 흐름!

▶️ 함수형 컴포넌트 state

• useState 를 사용해서 상태 관리를 한다.
• const [number, setNumber] = useState(0); 의 형태이다.
  • useState 함수는 배열을 반환한다 !
  • 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 setter함수가 들어간다.
  • useState("") 에는 상태의 초기값을 넣어준다. 형태는 자유! ( 숫자, 문자, 빈배열 등)
• 간단하게 예를 들어 number라는 변수의 초기값은 useState()에 담겨있다. useState(0)이라면 number의 초기값은 숫자 0이다. 이 때 setNumber 함수를 실행하면 number의 상태를 업데이트 해준다. setNumber 에 매개변수가 들어오면 변화가 생기는 것으로 생각하자. 결국 setNumber(+1 해주는 함수)가 들어오게 된다면 상태 변화가 일어나고 number의 값은 1이 된다. 초기값 0에 +1을 해주는 함수가 들어와 number의 값이 1이 되는 것!

import { useState } from "react";

function StateFunc() {
  const [number, setNumber] = useState(0);
  const [number2, increase] = useState(0);
  const [number3, decrease] = useState(0);

  return (
    <>
      <div>
        number state value {number} {""}
        <button
          onClick={() => {
           setNumber((prevNumber) => prevNumber + 1);
          }}
        >
          +2
        </button>
      </div>

      <h3>함수형 컴포넌트 state</h3>
      <div>
        숫자 : {number2}
        <button
          onClick={() => {
            increase((prevNumber2) => prevNumber2 + 1);
          }}
        >
          더하기 1
        </button>
        숫자 : {number3}
        <button
          onClick={() => {
            decrease((prevNumber3) => prevNumber3 - 2);
          }}
        >
          빼기 2
        </button>
      </div>
    </>
  );
}

export default StateFunc;

▶️ 클래스형 컴포넌트 state

• 잘 사용하지 않기 때문에 알고만 있자.

  import { Component } from "react";
  
  class StateClass extends Component {
    //-----옛날 방식
    //생성자를 만드는 순간 component 에 있는 메소드를 호출해줘야한다.
    //   constructor(props) {
    //     super(props); //super()는 부모 클래스의 생성자. 얘를 실행시켜야 this객체 사용 가능.
  
    //     this.state = {
    //       number: 0,
    //       text: "hello",
    //     };
    //   }
  
    //-----만약 생성자를 구현하지 않으면, 기본 생성자가 알아서 자동으로 실행된다.
    // constructor(props){
    //     super(props)
    // }
  
    //-----최근방식
    state = {
      number: 0,
      text: "hello",
    };
    state = {
      number2: 0,
      number3: 0,
    };
  
    render() {
      return (
        <>
          <div>props예시 {this.props.name}</div>
          <h3>클래스형 컴포넌트 state 공부</h3>
          <div>
            number state value {this.state.number}
            <button
              onClick={() => {
                //state변경은 보통 일반 변수 변경하듯이 하는 것이 아니다. 값을 재할당 하는 것이 아니다.
                //state를 변경시키는 함수를 사용한다. 클래스형 컴포넌트는 setState 메소드가 제공된다.
                //this.setState({ number: this.state.number + 1 });
                //   this.setState({ number: this.state.number + 1 });
  
                //만약 setState를 연달아 2번 사용해야 할 때, 위 처럼 사용하면 원하는 결과를 얻을 수 없다.
                //State는 비동기로 실행되기 때문.
  
                this.setState((prevState) => {
                  return { number: prevState.number + 1 };
                });
                this.setState((prevState) => {
                  return { number: prevState.number + 1 };
                });
              }}
            >
              +2
            </button>
            <h3>클래스형 컴포넌트 state 실습</h3>
            <div>숫자 : {this.state.number2}</div>
            <button
              onClick={() => {
                this.setState((prevState2) => {
                  return { number2: prevState2.number2 + 2 };
                });
              }}
            >
              +2
            </button>
            <div>숫자 : {this.state.number3}</div>
            <button
              onClick={() => {
                this.setState((prevState3) => {
                  return { number3: prevState3.number3 - 1 };
                });
              }}
            >
              -1
            </button>
          </div>
        </>
      );
    }
  }
  
  export default StateClass;