state란?

state는 컴포넌트 내부에서 바꿀 수 있는(바뀔 수 있는) 값을 의미한다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하고 주는 읽기 전용 값이지만 state는 컴포넌트 내부에 설정되는 값이다.

리액트는 클래스형 컴포넌트에서 state를 직접 사용할 수 있지만 함수형 컴포넌트에서는 직접 state를 사용하는 것이 불가능하다.

• 따라서 함수형 컴포넌트에서도 state를 관리할 수 있는 기능은 useState라는 hooks로 제공하고 있다.

class Counter extends React.Component{
    constructor(props);
        super(props);       // 반드시 명시해야 한다.

        this.state = {
            number: 3       // 변경 될 관리할 값이다. 초기값을 설정한다.
					// callOutz 상세 확인
        };
    }

    render() {

        const number = this.state.number;

        console.log('render 함수 호출 되나?');

            <>
                <h1>{this.state.number}</h1>
                <button onClick={() => this.setState({number: number - 1})}>- 1</button>
                <button onClick={() => this.setState({number: number + 1})}>+ 1</button>
            </>
        );
    }
}

• Class형 이다 보니 생성자로 매개변수를 받고 꼭 부모부터 받은 props는 부모 클래스의 생성자에 전달해야 한다.

<aside> 📌 **생성자 안에서 state를 사용하는 방법

1. state는 this. 를 명시해야 한다.
2. 이름은 반드시 state 여야 한다.
3. state에 저장되는 값의 형태는 반드시 Object 리터럴 형태로 작성해야 한다.**

</aside>

렌더링 시점 주의할 점

onClick 같은 함수를 통해서 this.state 객체 내부의 number를 직접 조작을 해도 화면에 변화는 없을 것이다.

→ 이렇게 조작을 해도 실제 객체 내부의 number 값은 이벤트 결과에 따라 변하지만 화면에 렌더링 되는 값에는 변화가 없다.

• 화면에 변화가 생기는 시점은 render 함수가 실행이 되었을 때 인데 함수가 실행이 되지 않음

이러한 문제를 해결하기 위해서는 state 객체를 새로 할당을 해야 렌더링이 가능하다.

• 객체 내부의 number key 값을 바꾸는 방식이 아닌 state 객체를 다시 만드는 것

하지만, 객체를 직접 교체를 해도 값의 변화가 없고 따로 제공하는 setState 메소드를 사용하여 객체를 교체해야 한다.