[React] State

---

📝 state

state는 Component 내부에서 바뀔 수 있는 값을 의미합니다. props는 Component가 사용되는 과정에서 부모Component가 설정하는 값이며, component 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 Componenet에서 바꾸어 주어야합니다.

---

React에는 두 가지 state가 있습니다.
하나는 class형 Component가 지니고 있는 state이고, 다른 하나는 함수형 Component가 지니고 있는 useState라는 함수를 통해 사용하는 state입니다.

📜 class형 Component의 state

- Component에 state를 설정할 때는 constructor 메서드를 작성하여 설정합니다.

consturctor(props){
	super(props);
  	// state의 초깃값 설정
  	this.state = {
    	number = 0
    }
}

constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 합니다. 이 함수가 호출되면 현재 class형 Component가 상속받고 있는 react의 Component 클래스가 지닌 생성자 함수를 호출해 줍니다.

그 다음에는 this.state 값에 초깃값을 설정해 주었습니다. Component의 state는 객체형식이어야 합니다.

- render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 됩니다.

render(){
  	const { number } = this.state; //state 조회
	return(
      ....
    );
}

- setState라는 함수를 이용해 state 값을 바꿔줍니다.

render(){
  	const { number } = this.state; //state 조회
	return(
      <div>
      	<button onClick={() => {
    		this.setState({ number: number + 1 });
    	}}
      </div>
    );
}

📜 함수형 Component의 useState

• 배열 비구조화 할당

배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법입니다.

const array = [1, 2];
const arr1 = array[0]; //1
const arr2 = array[1]; //2

위의 코드를 배열 비구조화 할당을 사용해 작성하면 아래와 같습니다.

const array = [1, 2];
const [arr1, arr2] = array;

• useState 사용하기
  먼저 코드 상단에 useState 함수를 불러와야합니다.

import { useState } from 'react';

그리고 배열 비구조화 할당 문법을 이용해 state의 기본 값을 지정해 줍니다.

const [state, setState] = useState('');

useState의 괄호 안의 값이 state에 담겨있는 상태입니다.
state 값을 변경하기 위해서는 state가 아닌 setState를 이용해 변경해야 합니다.

아래는 버튼 클릭 시 state 내용이 바뀌도록 설정한 코드입니다.

import { useState } from 'react';

const ChangeState = () => {
	let [text, setText] = useState('');
  	return(
    	<div>
      		<button onClick={() => {
    			setText('Hello');
    		}}
      	</div>
    )
}

버튼을 클릭하게 되면 아무것도 안 담겨 있는 state가 setText 함수로 인해 'Hello'로 변경됩니다.

📜 state 사용 시 주의 사항

• state 값을 변경해야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 합니다.
• state에 담겨있는 배열이나 객체를 변경하고 싶을 때는 아래와 같이 사용하면 됩니다.

import { useState } from 'react';

const ChangeState = () => {
	let [text, setText] = useState(['Hi', 'Hello']);
  	return(
    	<div>
      		<button onClick={() => {
    			let copy = [... text];
      			copy[0] = 'Bye';
      			setText(copy);
    		}}
      	</div>
    )
}

위 코드와 같이 객체에 대한 사본을 만들 때는 spread 연산자를 사용하여 처리해야 합니다.

---