state와 렌더링

function Counter() {
  let count = 0;              // 렌더링마다 0으로 초기화됩니다
  const [value, setValue] = useState(0);   // 값이 유지됩니다

  return (
    <div>
      <button onClick={() => { count += 1; }}>
        일반 변수 {count}   {/* 화면이 바뀌지 않습니다 */}
      </button>
      <button onClick={() => setValue(value + 1)}>
        state {value}      {/* 화면이 갱신됩니다 */}
      </button>
    </div>
  );
}

값이 바뀌어도 화면을 다시 그릴 필요가 없다면 state가 아니어도 됩니다. 화면에 반영돼야 하는 값만 state로 둡니다.

// 의도와 다르게 1만 증가합니다
function increaseTwice() {
  setCount(count + 1);   // count는 이번 렌더링 시점의 값입니다
  setCount(count + 1);   // 같은 값을 기준으로 계산합니다
}

// 이전 값을 기준으로 계산해 2가 증가합니다
function increaseTwiceCorrect() {
  setCount((prev) => prev + 1);
  setCount((prev) => prev + 1);
}

이전 값을 바탕으로 새 값을 만들 때는 함수를 넘기는 방식을 씁니다. 비동기 처리 후 상태를 갱신할 때도 마찬가지입니다.

// 화면이 갱신되지 않습니다
items.push(newItem);
setItems(items);

user.name = "홍길동";
setUser(user);

// 새로 만들어 교체합니다
setItems([...items, newItem]);                       // 추가
setItems(items.filter((item) => item.id !== id));    // 삭제
setItems(items.map((item) =>                         // 수정
  item.id === id ? { ...item, done: true } : item
));

setUser({ ...user, name: "홍길동" });                 // 객체 수정

중첩이 깊어지면 펼치는 코드가 길어집니다. 그럴 때는 상태 구조 자체가 너무 복잡한 것은 아닌지 먼저 검토합니다.

// 문제: items가 바뀔 때마다 totalCount도 따로 맞춰야 합니다
const [items, setItems] = useState([]);
const [totalCount, setTotalCount] = useState(0);

// 개선: 렌더링할 때 계산합니다
const [items, setItems] = useState([]);
const totalCount = items.length;
const totalPrice = items.reduce((sum, item) => sum + item.price, 0);

계산 비용이 정말 큰 경우에만 메모이제이션을 검토합니다. 대부분의 계산은 그냥 해도 충분히 빠릅니다. Part 6에서 다룹니다.