state

[ state란? ]

• React 에서 앱의 유동적인 데이터를 다루기 위한 개체 (변수와 비슷하다)
• state 가 변경될 시 변경된 state 와 관련된 모든 부분들이 자동으로 재렌더링 된다.
  
  

[ 클래스형 컴포넌트 ]

import React, { Component } from 'react';

class StateClass extends Component {
  
  constructor(props) {
    // 상속받은 Component 클래스의 constructor에 선언된 props 가져오기
    super(props);
    
    // state 선언
    this.state = {
      name: 'SeSAC',
      cnt: 0
    }
  }
  
  // 이렇게 constructor 밖에서 state를 선언할 수도 있다.
  state = {
    list: ['s', 'e', 's', 'a', 'c']
  };

  render() {
    return (
      <div>
        // state값 출력
        <div> {this.state.name}, {this.state.ctn}</div>
        // state값 update
        <button onClick={() => {this.setState({name: '새싹', cnt: this.state.cnt + 1})}>버튼</button>
      </div>
    )
  }
}

[ 함수형 컴포넌트 ]

함수형 컴포넌트에는 state 기능이 원래 없었지만, React 16.8 버전 이후부터 useState 라는 함수가 생겼고, 이를 통해 함수형 컴포넌트에서도 state 를 사용할 수 있게 되었다.

import React, { useState } from 'react';

function StateFunction() {
    // [state명, setter함수] = useState(초기값)
    // useState의 초기값은 숫자일 수도, 문자일 수도, 배열일 수도 있다.
    const [msg, setMsg] = useState("");
    const [list, setList] = useState([]);

    function changeMsg() {
        setMsg("메세지");
    }

    return (
        <div>
            <p>{msg}</p>
            <button onClick={changeMsg}>클릭</button>
        </div>
    )
}

export default StateFunction;