React - state

이전에 props 는 부모 컴포넌트가 설정하며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. 컴포넌트 내부에서 업데이트 할 수 있는 값을 사용하려면 state 를 써야 합니다. 이것은 언제나 기본값을 미리 설정해야 사용할 수 있으며,

this.setState() 메서드로만 업데이트해야 합니다.

순서

state 초깃값 설정하기 ⇒ state 렌더링하기 ⇒ state 값 업데이트

1. 컴포넌트의 생성자 메서드 : constructor()

• state 초깃값은 constructor 내부에서 설정합니다. 생성자 메서드는 컴포넌트를 새로 만들 때 실행됩니다. 다음 메서드를 One class 안에 작성해 보겠습니다.

    import react {Component} from 'react';
    import propTypes from 'prop-types';
    
    class One extneds Component {
    	(...)
    	constructor(props) {
    		super(props);
    	}
    	render () {
    		(...)
    	}
    }
    export default One;
    ```

### 2. state 초깃값 설정

- constructor 메서드 안에서 state 초깃값을 지정해 봅시다.

    One.js의 constructor 메서드
```javascript
    constructor(props) {
    	super(props);
    	this.state = {
    		number : 0
    	}
    }

• state에 number 값을 0으로 설정했습니다.

3.JSX 내부에서 state 렌더링

• 이제 number 값을 JSX 안에서 렌더링해 보겠습니다. 이를 렌더링 하는 방법은 props를 렌더링 하는 방법과 비슷합니다.

  One.js 중 render 메서드

     render() {
     	return (
     		<div>숫자 : {this.state.number}<div/>
     	);
     }

### 4. state 값 업데이트 : setState()

- 이제 state 값을 업데이트해 보겠습니다. state 값을 업데이트 할 때는 **this.setState( )** 메서드를 사용합니다.

        this.setState({
        	수정할 필드 이름 : 값,
        	수정할 또 다른 필드 이름 : 값
        });

### 5. state 를 constructor에서 꺼내기

원래 초기 state는 constructor 메서드에서 정의해야 하지만, defaultProps와 propTypes를 정의할 때 사용한 transform-class-properties 문법으로 constructor 바깥에서 정의할 수도 있습니다.
```javascript
    import React, {Component} from 'react';
    import PropTypes from 'prop-types';
    
    class One extneds Component {
    	
    	static deafaultProps = {
    		name : '기본 이름'
    	}
    	static propTypes = {
    		name : propTypes.string, //name props 타입을 문자열로 설정
    		age : propTypes.number.isRequired //필수적으로 존재해야 하며 숫자
    	}
    	state = {
    		number : 0
    	}
    
    	render(
    	(...)
    	)
    }
    export default One;

6. state 값을 업데이트할 때 주의 사항

• state 값을 업데이트 할 때는 언제나 .setState로만 업데이트 해야 합니다.

7. 정리

props 와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터들을 담고 있으므로 비슷해 보일 수도 있지만, 역할은 매우 다릅니다. props는 부모 컴포넌트가 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트