React, useState와 state

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.

Reference

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

• 배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 규칙입니다.

Parameter

• initialState: state의 초기 설정값입니다. 어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는 특별한 동작이 있습니다. 이 인수는 초기 렌더링 이후에는 무시됩니다.

Return Value

useState는 정확히 두 개의 값을 가진 배열을 반환합니다.

• 현재 state입니다. 첫 번째 렌더링 중에는 전달한 initialState와 일치합니다.
• state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 set 함수입니다.

주의사항

• useState는 Hook이므로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있습니다. 반복문이나 조건문 안에서는 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 추출하고 state를 그 안으로 옮기세요.
• Strict Mode에서 React는 의도치 않은 불순물을 찾기 위해 초기화 함수를 두 번 호출합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 초기화 함수가 순수하다면(그래야 합니다) 동작에 영향을 미치지 않습니다. 호출 중 하나의 결과는 무시됩니다.

Snapshot으로서의 State

일반적인 JavaScript 변수와 달리, React의 state는 snapshot과 유사하게 동작합니다.

상태를 갱신하면 이미 있는 변수의 값을 변경하는 것이 아니라 리렌더링을 유발합니다.

이 동작은 미묘한 버그를 피하는 데 도움이 됩니다.

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>
    </>
  )
}

위 코드에서 버튼을 클릭했을 때 number는 3이 올라가는게 아니라 1이 올라가게 됩니다.

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

리렌더가 일어나기 전에 이벤트 핸들러 안에 있는 모든 코드를 실행하게 되고 리렌더가 먼저 일어난 뒤에 state값이 바뀌기 때문에 마지막 **setNumber(1)**에 의해 number state 값은 1이 됩니다.

 

💡 React는 state를 업데이트 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다립니다.

만약 렌더링 전에 동일한 state 변수를 여러 번 업데이트하고 싶다면 업데이터 함수를 쓸 수 있습니다

Updater function

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

업데이터 함수는 이전 큐의 state를 기반으로 다음 state를 계산하는 함수입니다.

setNumber(number + 5);
setNumber(n => n + 1);

number는 6이 됩니다.

setNumber(number + 5);
setNumber(n => n + 1);
setNumber(42);

다음과 같이 핸들러 이벤트 안에 코드가 정의되어 있다면

코드는 순차적으로 진행되기 때문에 큐 안에서 number는 5 → 6(업데이터 함수에 의해) → 42로 다시 정의될 것입니다.

명명 규칙

업데이터 함수 인수의 이름은 해당 state 변수의 첫 글자로 지정하는 것이 일반적입니다.

state 업데이트 큐 – React