[React] 4 - Component > state

goal

• Component의 모든 것

컴포넌트 구성요소

1. property : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터

2. state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터

3. context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

2. state 상태

• 컴포넌트 내부에서는 값을 바꿀 수 없다. 그렇다면 "값을 바꿔야 하는 경우"에는? 여기서 state가 필요하다.
• 리액트에서는 컴포넌트의 상태를 관리하기 위해 state를 사용한다.
• state는 "값을 저장하거나 변경할 수 있는 객체"로 보통 이벤트와 함께 사용된다.

  state 사용시 주의사항!

  • 생성자(constructor)에서 초기화 해야 한다.
  • state값을 변경할 때는 setState()함수 (상태 관리 함수) 를 사용해야 한다.
  • setState() 함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.

// StateExample.jsx 

import React from 'react';
// import PropTypes from 'prop-types';

class StateExample extends React.Component {
    constructor(props) {
        super(props);
        
        //! state 정의
        //* 컴포넌트에서 관리하려고 하는 state변수의 초기값을 this.state에 객체 형태로 정의한다.
        this.state = {
            loading : true,
            formData : "no data"
        }
        //* 함수로 넘어갈 this는 반드시 생성자에서 bind() 함수로 묶어주어야 한다.
        this.handleData = this.handleData.bind(this); // bind메소드는 원본함수를 복제한 "새로운 함수"를 반환한다 / 첫번째 인자로는 this가 온다 / 
        console.log(this.handleData) // 이 this.handleData는 아래의 handleData 함수를 그대로 복제한다.
        console.log("this.handleData------------")

        //*setTimeOut 함수를 이용해서 handleData 함수를 호출한다.
        setTimeout(this.handleData, 4000);

    }

    //! setStat() 함수의 "인자로 함수를 전달" 하면 이전 staste 값을 쉽게 읽을 수 있다.
    //* setState() 함수의 인자로 함수를 전달하면, 이전 state 값을 따로 읽는 과정을 생략할 수 있다. (많이 사용함)
    handleData(data) { // 여기서 data가 어떻게 들어오는지 모르겠음......
        console.log(data) // undefined
        console.log("data -----------------------")
        // const data = "new data" // 이렇게 직접 넣어주니까 에러가 난다..... (already declared)
        this.setState((preState) => ({
            loading : false,
            formData : data + preState.formData
        }))
    }

    //! 위의 코드와 비교하기 (same result)
    handleData() {
        const data = "new data"
        //* 컴포넌트의 특수 변수 this.state를 사용해서 state값에 접근한다.
        const {formData} = this.state 
        //* state 변경 - 컴포넌트의 내장함수인 this.setState() 를 사용한다.
        this.setState({
            loading : false,
            formData : data + formData
        })
        // this.state.loading은 현재 true인 상태
        console.log("loading값",  this.state.loading)
        // 이후 호출될 render() 함수에서의 this.state.loading은 false 이다.
    }

    render() {
        return (
            <div>
                {/* state 데이터는 this.state로 접근 가능하다. */}
                <div>로딩중 : {String(this.state.loading)}</div>
                <div>결과 : {this.state.formData}</div>
            </div>
        );
    }
}


export default StateExample;