state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미함. 클래스형 컴포넌트가 가지고 있는 state가 있고, 함수형 컴포넌트가 가지고 있는 state가 있다. 

=> props와 다른 점은 부모 컴포넌트가 설정하는 값이고 자식 컴포넌트에서 읽기 전용으로만 사용할 수 있다는 점

 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state의 초깃값 설정
    this.state = {
      number: 0,
    };
  }
  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        ></button>
      </div>
    );
  }
}

export default Counter;

- super(props)를 작성하면 클래스형 컴포넌트가 상속받고 있는 리액트의 Component클래스가 지닌 생성자 함수를 호출해준다.

- this.state로 state를 조회할 수 있다. 

- this.setState로 state에 새로운 값을 넣을 수 있다. 

 

또는 생성자 없이 다음과 같이 state값을 초기화해줄 수 있다.

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0,
    fixedNumber: 0,
  };
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는 값 : {fixedNumber} </h2>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

---

import React, { Component } from 'react';

class Counter extends Component {
  /*  constructor(props) {
    super(props);
    // state의 초깃값 설정
    this.state = {
      number: 0,
      fixedNumber: 0,
    };
  }
  */
  state = {
    number: 0,
    fixedNumber: 0,
  };
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는 값 : {fixedNumber} </h2>
        <button
          onClick={() => {
            // prevState : 기존 상태
            // props는 현재 지니고 있는 props를 가리킴
            this.setState((prevState) => {
              return {
                number: prevState.number + 1,
              };
            });
            this.setState((prevState) => ({
              number: prevState.number + 1,
            }));
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

- 혹은 이런식으로 this.setState에 객체 대신 함수 인자를 전달할 수 있다.

 

<button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              () => {
                console.log('방금 setState가 호출되었습니다.');
                console.log(this.state);
              }
            );
          }}
        >
          +1
        </button>

- this.setState의 두번째 파라미터에 콜백함수를 등록하여 이후에 할 작업을 등록할 수 있다. 

 

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

- useState('')로 상태의 초깃값을 넣어줌.

- 해당 함수를 호출하면 배열이 반환되는데, 첫번째는 현재 상태, 두번째는 상태를 바꾸어주는 setter 함수가 반환됨

- 비구조화할당으로 setMessage 변수에 setter함수를 할당함

import React, { useState } from 'react';

const Say = () => {
  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;

- 한 컴포넌트에서 setState를 여러번 사용해도 상관 없다.