1. State란?
state 는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 React 내장 객체.
state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 변경으로 발생할 수 있으며, 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다.
객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 재렌더링한다.
일반 변수와의 차이점은, 일반 변수는 함수가 종료될 때 사라지지만 state 변수는 리액트에 의해 보존된다는 점이다.
컴포넌트의 역할은 원시 데이터를 HTML로 바꾸는 것이기 때문에, 이 원시 데이터는 props, state 객체로 구성돼 있다고 할 수 있다.(props와 state가 render() 의 입력 데이터라고 할 수도 있다.) 따라서 state는 컴포넌트의 동작을 제어하는 일부 속성을 나타낸다.
state를 반드시 써야 하는 것은 아니며, 복잡성이 증가하므로 stateless 컴포넌트가 항상 선호된다.
state 변수에 변경사항을 직접 적용하지 않는다. 'setState()' 를 써서 state 객체에 대한 업데이트를 예약하는 작업을 수행한다.
그러나 setState()가 항상 컴포넌트를 즉시 업데이트 하는 것은 아니다. 업데이트를 일괄 처리하거나 나중으로 연기할 수 잇다. 즉, setState()는 비동기식이기 때문이다.
2. State 만드는 법
import {useState} from 'react';
let [number,setNumber] = useState(0);
const onIncrease=()=>{
setNumber(number+1);
}
useState 를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출하면 배열이 반환되는데, [현재 상태,Setter 함수] 형태의 배열이 반환된다.
3. setState()를 동기적으로 사용하기 위한 함수형 업데이트
import {useState} from 'react';
let [number,setNumber] = useState(0);
const onIncrease=()=>{
setNumber(prev=>prev+1);
}
onIncrease 함수에서 setNumber 를 사용할 때, 그 다음 상태를 파라미터로 넣어준 것이 아니라, 값을 업데이트 하는 함수를 파라미터로 넣어준 것.
함수형 업데이트 : setState에 값을 그대로 전달하는 것이 아닌, 함수를 전달하는 것
