React 공식문서 정리 - State

State : 컴포넌트의 기억 저장소

1. 렌더링 사이에 데이터를 유지
2. React가 새로운 데이터로 리렌더링하도록 유발

state를 사용하는 경우

1. 지역 변수는 렌더링 간에 유지되지 않는다.
2. 지역 변수를 변경해도 렌더링을 일으키지 않는다.

   렌더링 간의 데이터를 유지하기 위해 state 변수 사용
   변수를 업데이트하면, 리렌더링을 유발하는 state 변수 사용

state 변수 추가하는 법

import { useState } from 'react';
const [index, setIndex] = useState(0);
//index는 state 변수이고, setIndex는 setter 함수이다.

(리)렌더링 되는 상황

1. 컴포넌트 초기 렌더링
2. 컴포넌트의 state가 없데이트된 경우

state 업데이트 큐(우리가 아는 queue)

react 같은 라이브러리에서는 상태가 동기적으로 바뀌기 때문에, 상태 변경 요청을 큐에 넣어 처리한다.
react는 사용자가 버튼을 클릭하는 등의 입력을 통해 데이터가 변경될 때, 상태를 바꾸려는 요청이 들어오면, 업데이트 큐에 저장한다. react는 다음 렌더링 시점에 큐에 쌓인 모든 요청을 한꺼번에 처리해서 상태를 변경한다.
-> 이렇게 하는 이유는 요청이 들어올 때 마다 매번 리렌더링 하면 성능 낭비이기 때문이다.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

1. setNumber(number + 1);는 현재 렌더링 된 number값(0)을 읽어서 0+1을 예약한다. 여러번 호출해도 현재 렌더링 된 number값(0)을 참조한다.
2. setNumber(number + 1) 세 번 호출은 모두 0 + 1을 예약하고, 마지막 값만 보여준다.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
       	setNumber(prevNumber => prevNumber + 1);
  		setNumber(prevNumber => prevNumber + 1);
  		setNumber(prevNumber => prevNumber + 1);
      }}>+3</button>
    </>
  )
}
//prevNumber => prevNumber + 1 는 업데이터 함수(updator function)

1. 업데이터 함수를 사용하면, 레더링이 아닌 이전 업데이터 함수의 반환값을 가져와서 계산을 한다.
2. setNumber(prevNumber => prevNumber + 1);를 큐에 3번 추가하고, 최종 결과값인 3(+3)을 반환한다.

batching 배치 처리

react에서 여러 상태 업데이트를 하나의 렌더링 사이클에 묶어 성능을 향상시키고, 불필요한 렌더링을 줄이기 위해 사용된다.

그래서
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1);
가 한 배치에 포함되기 때문에 결국 +1이라는 결과라 렌더링 되는 것이다.