📝 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 함수를 불러와야합니다.
그리고 배열 비구조화 할당 문법을 이용해 state의import { useState } from 'react';
기본 값
을 지정해 줍니다.
useState의 괄호 안의 값이 state에 담겨있는 상태입니다.const [state, setState] = useState('');
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(
<button onClick={() => {
let copy = [... text];
copy[0] = 'Bye';
setText(copy);
}}
)
}
```
위 코드와 같이 객체에 대한 사본을 만들 때는 spread 연산자
를 사용하여 처리해야 합니다.