1. React Hook, useState

useState

const [state, setState] = useState(initialState);

문법

1. useState(initialState)

import { useState } from 'react';

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

파라미터

• initialState: 원하는 초기 state 값. 모든 유형의 값이 될 수 있지만, 함수에는 특별한 동작이 있습니다. 이 인수는 초기 렌더링 후에 무시됩니다.
• 함수를 initialState로 전달하면 초기화 함수로 처리됩니다. 순수해야 하고 인수를 사용하지 않아야 하며 무슨 값이든 반환해야 합니다. React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고 반환 값을 초기 상태로 저장합니다.

반환값

1. 현재 state. 첫번째 렌더링 중에 전달한 initalState와 일치합니다.

2. state를 다른 값으로 업데이트하고 다시 렌더링을 트리거할 수 있는 set 함수입니다.

주의 사항

• useState 는 hook 이므로 컴포넌트 또는 커스텀 hook의 최상위 레벨에서만 호출할 수 있습니다. 루프나 조건 내에서 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 추출하고 해당 컴포넌트로 state를 이동합니다.

• Strict 모드에서 React는 우발적인 불순물을 찾기 위해 초기화 함수를 두 번 호출합니다. 이것은 개발 전용 동작이며 실제 제품(서비스)에 영향을 미치지 않습니다. 초기화 함수가 순수한 경우(순수해야 함) 동작에 영향을 주지 않아야 합니다. 호출 중 하나의 결과는 무시됩니다.

2. set 함수, setSomething(nextState)

const [name, setName] = useState('Edward');

function handleClick() {
	// 1. 직접 상태 전달
  setName('Taylor');
	// 2. 이전 state에서 계산
  setAge(a => a + 1);

파라미터

• nextState: 원하는 상태 값입니다. 모든 타입의 값이 올수도 있지만 함수에는 특별한 동작이 있습니다.
• 함수를 nextState로 전달하면 업데이트 함수로 처리 됩니다. 해당 함수는 순수해야하고 pending(보류)상태를 유일한 인수로 가져와야 하며 다음 state를 반환해야 합니다. React는 업데이트 기능을 대기열에 넣고 컴포넌트를 다시 렌더링합니다. 다음 렌더링 동안 React는 대기 중인 모든 업데이터를 이전 state에 적용하여 다음 state를 계산합니다.

반환값

주의 사항

• set함수는 다음 렌더링에 대한 state변수만 업데이트 합니다. set함수를 호출한 후 state변수를 가져오면 여전히 호출 전 화면에 있던 이전 값을 얻게됩니다.

• 공한 새 값이 Object.is 비교에 의해 결정된 현재 상태와 동일하면 React는 컴포넌트와 그 자식을 다시 렌더링하지 않습니다. 이것은 최적화입니다. 어떤 경우에는 React가 자식을 건너뛰기 전에 컴포넌트를 호출해야 할 수도 있지만 코드에 영향을 미치지 않아야 합니다.

• React는 state 업데이트를 일괄 처리합니다. 모든 이벤트 핸들러가 실행되고, 해당 set함수를 호출한 후 화면을 업데이트합니다. 이렇게 하면 단일 이벤트 중에 여러 번 다시 렌더링 되는 것을 방지할 수 있습니다. 드문 경우지만 예를 들어 DOM에 액세스하기 위해 React가 화면을 더 일찍 업데이트하도록 강제해야 하는 경우 flushSync를 사용할 수 있습니다.

• 렌더링 중에 set함수를 호출하는 것은 현재 렌더링 컴포넌트 내에서만 허용됩니다. React는 출력을 버리고 즉시 새 state로 다시 렌더링하려고 시도합니다. 이 패턴은 거의 필요하지 않지만 이전 렌더링의 정보를 저장하는데 사용할 수 있습니다.

• Strict모드에서 React는 우발적인 불순물을 찾는 데 도움을 주기 위해 업데이트 기능을 두 번 호출합니다. 이것은 개발 전용 동작이며 실제 제품(서비스)에 영향을 미치지 않습니다. 초기화 함수가 순수한 경우(순수해야 함) 동작에 영향을 주지 않아야 합니다. 호출 중 하나의 결과는 무시됩니다.

사용법

컴포넌트에 상태 추가

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');
  // ...

1. current state는 초기에 사용자가 제공한 initial state(초기 상태)로 설정됩니다.

2. 상호 작용에 대한 응답으로 다른 값으로 변경할 수 있는 set 함수입니다.

function handleClick() {
  setName('Robin');
}

function handleClick() {
  setName('Robin');
  console.log(name); // Still "Taylor"!
}

이전 state를 기반으로 state 업데이트

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

1. a => a + 1은 pending state로 42를 수신하고 next state로 43을 반환합니다.

2. a => a + 1은 pending state로 43을 수신하고 next state로 44를 반환합니다.

3. a => a + 1은 pending state로 44를 수신하고 next state로 45를 반환합니다.

객체 및 배열 state 업데이트

// 🚩 이와 같이 객체의 state를 변경하지 마세요:
form.firstName = 'Taylor';

// ✅ state를 새 객체로 바꾸세요.
setForm({
  ...form,
  firstName: 'Taylor'
});

초기 state 재생성 방지

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  // ...

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  // ...

키로 상태 재설정

import { useState } from 'react';

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState('Taylor');

  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <p>Hello, {name}.</p>
    </>
  );
}

이전 렌더링의 정보 저장

• 필요한 값을 현재 props 또는 다른 state에서 완전히 계산할 수 있는 경우 해당 중복 state를 모두 제거하세요. 너무 자주 다시 계산하는 것이 걱정된다면 useMemo Hook이 도움이 될 수 있습니다.

• 전체 컴포넌트 트리의 state를 재설정하려면 컴포넌트에 다른 key를 전달하십시오.

• 가능한 경우 이벤트 핸들러에서 모든 관련 state를 업데이트하십시오.

export default function CountLabel({ count }) {
  return <h1>{count}</h1>
}

import { useState } from 'react';

export default function CountLabel({ count }) {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);
  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? 'increasing' : 'decreasing');
  }
  return (
    <>
      <h1>{count}</h1>
      {trend && <p>The count is {trend}</p>}
    </>
  );
}

문제 해결

state를 업데이트했지만, 로그에는 이전 값이 보입니다

function handleClick() {
  console.log(count);  // 0

  setCount(count + 1); // 리렌더링 요청과 함께 1로 변경
  console.log(count);  // 아직 카운트 값이 0!

  setTimeout(() => {
    console.log(count); // 해당 코드 또한 0!
  }, 5000);
}

const nextCount = count + 1;
setCount(nextCount);

console.log(count);     // 0
console.log(nextCount); // 1

state를 변경했는데 화면에는 반영이 되지 않아요

obj.x = 10;  // 🚩 Wrong: 기존 객체 변경
setObj(obj); // 🚩 아무것도 하지 않는다.

// ✅ Correct: 새로운 객체 생성하기
setObj({
  ...obj,
  x: 10
});

다음 오류가 발생합니다. “리렌더링이 너무 많습니다."

// 🚩 Wrong: 렌더링 중에 처리기를 호출합니다. 
// onClick 속성 안에서 호출하였지만 즉시 함수를 호출하는 것으로 판단하여 해당 함수를 계속 호출함
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: 이벤트 핸들러를 전달합니다.
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: 인라인 함수를 전달합니다.
return <button onClick={(e) => handleClick(e)}>Click me</button>

초기화 함수 또는 업데이트 함수가 두 번 실행됩니다.

function TodoList() {
  // 해당 컴포넌트는 모든 렌더링에 대해 두 번 실행됩니다.

  const [todos, setTodos] = useState(() => {
    // 이 초기화 함수는 초기화 도중 두 번 실행됩니다.
    return createTodos();
  });

  function handleClick() {
    setTodos(prevTodos => {
      // 이 업데이트 함수는 클릭할 때마다 두 번 실행됩니다.
      return [...prevTodos, createTodo()];
    });
  }
  // ...

setTodos(prevTodos => {
  // 🚩 Mistake: mutating state
  prevTodos.push(createTodo());
});

setTodos(prevTodos => {
  // ✅ Correct: replacing with new state
  return [...prevTodos, createTodo()];
});

state를 함수로 설정하려고 하는데, 그전에 호출됩니다.

const [fn, setFn] = useState(someFunction);

function handleClick() {
  setFn(someOtherFunction);
}

const [fn, setFn] = useState(() => someFunction);

function handleClick() {
  setFn(() => someOtherFunction);
}

마무리

References

useState – React

The library for web and native user interfaces

https://react.dev/reference/react/useState