[React] state

state

컴포넌트 내부에서 바뀔 수 있는 값이며
클래스형 컴포넌트가 지니고 있는 state와
함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state가 있다.

class형 컴포넌트의 state

import { Component } from "react";

class Counter extends Component {
  constructor(props) {
    // 컴포넌트 생성자 메서드
    super(props); // 부모 클래스 생성자
    this.state = {
      // state의 초깃값 설정하기
      number: 0,
      number2: 10,
    };
  }
  render() {
    const { number, number2 } = this.state; // state를 조회할 때는 this.state로 조회
    return (
      <div>
        <h1>{number}</h1>
        <h1>{number2}</h1>
        <button
          className="addButton"
          onClick={() => {
            // onClick을 통해 버튼이 클릭되었을 때 호출할 함수 지정
            this.setState({ number: number + 1 }); // this.setState를 사용하여 state에 새로운 값을 넣을 수 있음
          }}
        >
          1씩 증가하는 버튼
        </button>
        <button
          className="removeButton"
          onClick={() => {
            this.setState({ number2: number2 - 1 }); // this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꿈
          }}
        >
          1씩 감소하는 버튼
        </button>
      </div>
    );
  }
}

export default Counter;

✏ 코드 설명

constructor를 작성할 때는 반드시 super(props)를 호출해야한다.
자바스크립트에서 super는 부모클래스 생성자의 참조이며 자바스크립트의 언어적 제약사항으로 super를 호출하기 전에는 this를 사용할수 없다.
또한 props를 super의 인자로 전달하는 것을 실수로 빠뜨리더라도 정상적으로 동작되는 것을 보장해 준다.
그러므로 super(props)를 호출하는 것은 생성자 내부에서도 this.props를 정상적으로 사용할 수록 보장해준다.

this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꾸어 줍니다.

---

➕ state를 constructor에서 꺼내기
constructor 메서드를 선언하지 않고도 state 초깃값을 설정할 수 있다.

➕ this.setState에 객체 대신 함수 인자 전달하기
this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트 된다.
그 말은 즉, setState로 변경한 state 값이 즉시 적용되지 않다는 말이며 실제로

onClick={() => {
	this.setState({ number : number + 1 });
    this.setState({ number : this.state.number + 1 });
}}

이 코드를 실행하면 this.setState를 두번 사용함에도 버튼을 클릭할 때 +1만 더해진다.
해결책은 this.setState를 사용할 때 객체 대신 함수를 인자로 넣어주는 것이다.

➕ this.setState가 끝난 후 특정 작업 실행하기
setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때 setState의 두번 째 파라미터로 콜백 함수를 등록한다.

---

함수 컴포넌트의 useState

useState 함수의 인자에는 상태의 초깃값을 넣어준다.
함수를 호출하면 배열을 반환하는데,
배열의 첫 번째 원소는 현재 상태이고,
두번 째 원소는 상태를 바꾸어 주는 함수이다. = 세터(setter)함수

import { useState } from "react";

const Say = () => {
  // [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값)
  const [message, setMessage] = useState(""); // 배열 비구조화 할당
  const onClickEnter = () => setMessage("안녕하세요");
  const onClickLeave = () => setMessage("안녕히 가세요");

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨간색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파란색
      </button>
    </div>
  );
};

export default Say;