ReactJS - state

state란?

state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다

클래스형 컴포넌트의 state

import React, {component} from 'react';

class Counter extends Component {
	constructor(props) {
    	super(props);
        this.state = {
        	number : 0
        }
    }
    
    render() {
    	const { number } = this.state;
        
        return (
        	<div>
            	<p>count : {number}</p>
                <button onClick={()=>{this.setState({number : number + 1})}}>+ 1</button>
            </div>
        )
    }
}

export default Counter;

// constructor 를 선언하지 않고도 초기 state를 설정 할 수 있습니다

class Counter extends Component {
	this.state = {
        	number : 0
    }
    
    render() {
    	const { number } = this.state;
        
        return (
        	<div>
            	<p>count : {number}</p>
                <button onClick={()=>{this.setState({number : number + 1})}}>+ 1</button>
            </div>
        )
    }
}

• setState의 두번째 파라미터에 callback함수를 넣을 수 있습니다

 <button onClick={()=>{
 this.setState(
 	{number : number + 1},
    () => {
    	console.log('방금 setState가 호출 되었습니다')
    }
 )
 }}>+ 1</button>

함수형 컴포넌트의 state

useState

v16.8 이후 useState 라는 함수를 통해 함수형 컴포넌트에서도 state를 사용 할 수 있습니다

 import React, {useState} from 'react';
 
 const Say = () => {
 	const [message, setMessage] = useState('');
 }

• useState() 함수의 인자값은 초기값
• 함수의 반환 값을 배열로 받아와 비구조화할당으로 선언
• 첫번째 원소 message 는 현재 상태, 두번째 요소 setMessage 는 상태를 바꾸어주는 함수 (위 코드 예시)

state 주의사항

• state 값을 조작할 때는 setState() -클래스형 , useState() - 함수형의 setter 함수를 사용해야합니다
• 배열, 객체 데이터 업데이트 시에도 사본을 만들고 그 사본의 상태를 업데이트 한 후에 반환합니다
• 사본을 만들 때 객체는 spread연산자, 배열은 내장 메서드를 활용합니다