6강. State와 화면 갱신

?1. 이번 강의에서 해결할 문제

관심 게임 버튼을 눌러도 현재 카드는 변하지 않습니다. 사용자 행동의 결과를 기억하고 즉시 화면에 반영해야 합니다.

✓2. 학습 목표

• 일반 변수와 state의 차이를 설명한다.
• useState로 컴포넌트 상태를 선언하고 갱신한다.
• 이전 상태를 바탕으로 안전하게 다음 상태를 계산한다.

◇3. 핵심 개념

state는 렌더링 사이에 React가 보존하는 컴포넌트의 기억입니다. useState는 현재 값과 값을 바꾸는 setter를 반환합니다. setter를 호출하면 React가 새 상태로 컴포넌트를 다시 렌더링합니다.

state를 직접 바꾸지 않고 setter를 사용해야 React가 변경을 알고 화면과 상태를 일관되게 유지할 수 있습니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/components/GameCard.tsx

import { useState } from 'react';

type GameCardProps = {
  title: string;
  releaseDate: string;
  platform: string;
};

export function GameCard(props: GameCardProps) {
  const [isFavorite, setIsFavorite] = useState(false);

  function toggleFavorite() {
    setIsFavorite((current) => !current);
  }

  return (
    <article className="game-card">
      <p>{props.releaseDate}</p>
      <h2>{props.title}</h2>
      <p>{props.platform}</p>
      <button type="button" onClick={toggleFavorite}>
        {isFavorite ? '관심 게임 해제' : '관심 게임 추가'}
      </button>
    </article>
  );
}

→5. 코드가 동작하는 이유

첫 렌더링에서 isFavorite은 false입니다. 클릭하면 setter가 이전 값을 반대로 바꾸고 다시 렌더링합니다. 새 렌더링의 삼항 연산자는 true에 맞는 문구를 반환합니다. 함수형 갱신은 연속된 업데이트에서도 가장 최신 상태를 입력으로 받습니다.

!6. 자주 하는 실수와 해결법

• 일반 변수만 변경: 렌더링 때 초기화되고 React도 변경을 모릅니다. 화면에 영향을 주는 기억은 state로 둡니다.
• isFavorite = true처럼 직접 변경: setter를 호출합니다.
• setter 직후 값이 즉시 바뀌었다고 가정: 현재 이벤트의 state는 스냅샷입니다. 다음 렌더링에서 새 값을 사용합니다.
• Hook을 조건문 안에서 호출: Hook은 컴포넌트 최상위에서 같은 순서로 호출합니다.

✎7. 직접 실습

카드에 조회수 state를 추가하세요. “미리보기” 버튼을 누를 때 함수형 갱신으로 1씩 증가시키고 미리보기 3회처럼 표시하세요.

?8. 이해 점검 질문 3개

1. 일반 변수를 바꿔도 React 화면이 갱신되지 않는 이유는 무엇인가요?
2. 이전 값에 의존하는 갱신에서 함수형 setter가 안전한 이유는 무엇인가요?
3. 컴포넌트가 다시 렌더링되어도 state가 유지되는 이유는 무엇인가요?

■9. 핵심 요약

state는 UI에 영향을 주는 컴포넌트의 기억입니다. setter로 새 상태를 요청하면 React가 화면을 다시 계산합니다.