[SeSAC] React 학습 정리(2) / state

 

state : 

 - 특정 컴포넌트가 가지고 있는 상태값

 - state 변경시 재 랜더링이 자동으로 수행됨

 

클래스형 / 함수형 컴포넌트 에서 state 사용 문법이 다름.

 

클래스형 컴포넌트에서 state

 - state의 이름과 초기값을 생성자 혹은 필드에서 설정해 주고, 

 - render() 함수에서 this.setState 함수를 통해 state를 변경해 줄 수 있음.

// 클래스형 컴포넌트
import React, { Component } from 'react';

class Counter extends Component {
  // 생성자를 사용한 state 설정 방법
  // React 버전 16.3.0 이전에 사용되던 방법
  constructor(props) {
    super(props);

    this.state = {
      number: 0,
    };
  }

  // 클래스 필드(class field)를 사용한 state 설정 방법
  // React 버전 16.3.0 이후에 사용되던 방법
  state = {
    number: 0,
  };

  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 }); // state 값은 직접 변경 불가능 setState 함수를 사용해야함
          }}
        >
          set State
        </button>
        <button
          onClick={() => {
            alert(number);
          }}
        >
          alert Number
        </button>
      </div>
    );
  }
}

export default Counter;

 

함수형 컴포넌트에서 state

  - React 16.8.0 버전부터 useState 함수(훅) 을 사용해서 state 값을 제어할 수 있게됨. >> React에서 권장하는 방식

  - useState를 import 해서 사용한다.  import React, { useState } from 'react'

  - useState는 React의 훅 중 하나

  - useState() 함수에 매개변수로 전달하는 값으로 state 초기값을 설정한다.

  - useState() 함수의 결과값에 state 값과 state값을 변경할 수 있는 함수를 구조분해 해서 사용한다.

      >> const [state, setState] = useState(initialState)  (배열형태임을 확인, 첫번째 요소는 상태값, 두번째 요소는 상태를 갱신하는 함수)

import { useState } from 'react';

const SayFunction = () => {
  console.log(useState('welcome!'));

  // const [state, setState] = useState(initialState);
  const [message, setMessage] = useState('welcome');
  // message : 메세지(welcome)의 상태값
  // setMessage : 메세지(welcome)의 상태 값을 바꾸는 함수

  const onClickEnter = () => {
    setMessage('Hi!');
  };
  const onClickLeave = () => {
    setMessage('Bye!');
  };

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

export default SayFunction;

 

useState

위 예제에서 state를 변경하는 setCount 함수는 큐에 들어가서 다른 코드들의 실행 완료를 기다린 후에(이를 상태 업데이트 예약이라 함) state 값을 변경한다. 그 후에 리렌더링이 진행된다.

 

 

-끝-