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

✅ React의 state

1️⃣ 상태(state) 저장 → 컴포넌트는 입력값, 이미지, 장바구니 등의 데이터를 기억해야 함.

2️⃣ 상태 변경 및 반영 → 입력, 버튼 클릭 등의 상호 작용에 따라 state가 업데이트되며 화면이 변경됨.

React는 이러한 컴포넌트별 메모리를 state라고 부름.

일반 변수로 충분하지 않은 경우

다음은 조각상 이미지를 렌더링하는 컴포넌트입니다. “Next” 버튼을 클릭하면 index를 1, 2로 변경하여 다음 조각상을 표시해야 합니다. 그러나 이것은 작동하지 않습니다 (시도해 보세요!)

✅ React에서 state가 필요한 이유

1️⃣ 지역 변수는 렌더링 간 유지되지 않음 → React는 매 렌더링 시 지역 변수를 초기화함.

2️⃣ 지역 변수 변경은 렌더링을 유발하지 않음 → React는 변화된 데이터를 인식하지 못함.

🛠 해결 방법: useState 사용

state 변수를 추가하려면 파일 상단의 React에서 useState를 가져옵니다.

import { useState } from 'react';

그런 다음 이 줄을