state란?

• state는 간단하게 말해서 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링되어 화면이 바뀐다.

• state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다.

• 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()라는 리액트 함수를 사용하여 state라는 저장 공간에 담아 사용한다.

state 사용 방법

1.파일 위쪽에 useState를 임포트 해준다.

import { useState } from 'react';

• 여기서 state는 현재 상태값, setState는 state를 업데이트하는 함수를 의미한다.

• 보통 업데이트하는 함수는 앞에 set을 붙여 카멜케이스로 쓴다. 예를 들면 const [title, setTitle] = useState(''); 와 같이 선언할 수 있다.

• 카멜케이스(camelCase)란? 중간 글자들은 대문자로 시작하지만 첫 글자는 소문자로 작성하는 것

• let이 아니라 const로 선언하는 이유는?
  👉 변수의 재할당을 막기 위해서
  👉🏻 let을 사용하면 state=100과 같은 변수 형식의 할당이 가능해지기 때문에 이를 방지하고 setState를 사용한 변수 변경만을 허락하기 위해서 const로 선언한다.

• useState는 함수 안에서 직접적으로 선언되어야 한다. 예를 들면 아래와 같다.

const ExpenseItem = (props) ⇒ {
이곳에 있어야 한다.
const expenseData = {
여기에 있으면 안 된다.
}

state를 사용하는 이유

변수는 변경되어도 자동으로 화면이 바뀌지 않는다.
하지만 state는 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다

setState의 동작

1) sestState는 비동기적으로 작동한다.
동기(Synchronous : 동시에 발생하는)

• 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다.
• 순차적으로 실행되기 때문에, 어떤 작업이 수행 중이라면 다음 작업은 대기해야 한다.
• 블로킹(작업 중단)이 발생한다.
  비동기(Asynchronous : 동시에 발생하지 않는)
• 작업 종료 여부에 관계없이 다음 작업을 실행한다.
• 그러므로 동기 방식과는 달리 실행 순서를 보장하지 않는다.
• 블로킹이 발생하지 않는다.

setCount는 이벤트 핸들러 안에서 현재 state의 값에 대한 변화를 요청하기만 하는 것이라서 이벤트 핸들러가 끝나고 리액트가 상태를 바꾸고 화면을 다시 그리기를 기다려야 한다

2) setState는 왜 비동기적으로 동작할까
state는 값이 변경되면 리렌더링이 발생하는데, 변경되는 state가 많을수록 리렌더링이 계속 일어나고 속도도 저하되는 등 성능적으로 문제가 많을 것이다.

그래서 16ms 동안 변경된 상태 값들을 모아서 한 번에 리렌더링을 진행하는데 이를 batch(일괄) update라고 한다.