[React] State와 useState

• props는 부모 컴포넌트가 설정하는 값, 자식 컴포넌트에서는 읽기 전용으로만 사용
• State란 (자식)컴포넌트 내부에서 바뀔 수 있는 값
• 중요한 데이터는 변수가 아닌 state에 보관
• 쓰는 이유? => state 변동시 자동으로 html이 재렌더링해서 반영!!
• 기본값을 넣어줄 수 있는데, 자료형은 일반적으로 자유롭게 가능

✅ Class 컴포넌트에서 State

1. constructor 메서드 사용

• constructor 작성할 때는 반드시 super(props)호출
• this.state에 초깃값 설정, state 조회
• this.setState로 state에 새로운 값 넣을 수 있음

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

2. constructor에서 꺼내기

class Counter extends Component {
	state = {
    	number : 0,
    	fixedNumber : 0
    }
   	render() {
    	const {number, fixedNumber} = this.state
        return (
        	<>
            	<h3>{fixedNumber}</h3>
                <h1>{number}</h1>
                <button onClick={() => {
                	this.setState({number : number + 1})
                }}>
                	+1
                </button>
            </>
        )
    }
   
}

Functional 컴포넌트에서 useState

// import (보통 자동으로 들어옴)
import React, {useState} from 'react';
// use
let [count, setCount] = useState(0);

• useState를 사용하면 배열로 선언한 두 변수에 값을 각각 담아주는데,
• 첫 번째 변수는 데이터값이 들어가고, 두 번째 변수에는 이를 변경하는 함수가 담김
• 그리고 이형태는 JavaScript의 Destructuring임!!

State 사용

• state 변경시에는 useState에서 할당해준 변경함수를 사용
• 왜냐면 변경함수를 사용해서 변경해야만 정상적으로 재렌더링이 일어남!!

function App() {
	return(
		{count}
		< button onClick = {()=>{setCount(count+1)}}>up!!< /button >
	)
}

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍