State

1. 개념

'state'는 사전적으로 '상태'를 뜻한다.
즉, 자신의 상태. 내(Component)가 가지고 있으면서, 내(Component 안에서) 스스로 바꿀 수 있는 것을 의미한다.

2. 선언

constructor() {
    super();
    this.state = {
    	id: 0,
        isIdValidation: true
    };
}

• 객체 형태.
• 컴포넌트 내장 객체 this.state 안에 변수와 값이 담긴다.

(+) {}는 안에 나올 문법이 javaScript 임을 의미한다.
(+) style={{}//객체}//javaScript

3. 호출

this.state.(객체 key)

ex) this.state.isIdValidation

(+) 구조분해할당을 통해서 반복되는 구문을 생략할 수 있다. 이는 props도 동일.

//render() 내에서
const { isIdValidation } = this.state;

4. 변경

changeIdValidation = () => {
    this.setState({
        isIdValidation: !this.state.isIdValidation
    });
};

여기서 주의할 점은 '='을 통한 직접 변경이 아니라 setState를 이용했다는 것이다. 이는 React가 선언적이기 때문이다.
(설명 이어서↓)

5. 사용 이유

React는 선언적 프로그래밍으로 이루어진다고 언급한 적이 있다. 이는 변경을 최소화하고, 변화가 일어난 부분만 교체된다. 그렇다면 그 기준은 무엇인가? 바로 state이다. 컴포넌트 내 state 값이 바뀌었을 때 렌더링이 발생한다.

정리하자면, state는 컴포넌트 내에서 데이터가 바뀔 때마다 효율적으로 화면에 나타내기 위함이다.