useState - 변하는 데이터 관리
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 useState를 사용하는 이유는 무엇인가?
💡 useState는 컴포넌트 내부에서 변하는 데이터(State)를 관리합니다. State가 변경되면 React가 자동으로 해당 컴포넌트를 다시 렌더링하여 화면을 업데이트합니다. 일반 변수는 변경해도 화면이 바뀌지 않습니다.
Q2. const [count, setCount] = useState(0); 에서 0이 의미하는 것은?
💡 useState(0)의 0은 State의 초기값입니다. 컴포넌트가 처음 렌더링될 때 count의 값이 0으로 시작됩니다. 이후 setCount가 호출되면 초기값은 더 이상 사용되지 않습니다.
Q3. 배열 State에서 새 항목을 추가하는 올바른 방법은?
💡 React의 State는 불변성을 유지해야 합니다. push()는 기존 배열을 직접 수정하므로 React가 변경을 감지하지 못합니다. 스프레드 연산자(...)로 기존 배열을 복사하고 새 항목을 추가한 새 배열을 만들어 setItems에 전달해야 합니다.
Q4. 함수형 업데이트 패턴 setCount(prev => prev + 1)을 사용하는 이유는?
💡 State 업데이트는 비동기로 처리될 수 있습니다. setCount(count + 1)을 여러 번 연속 호출하면 count가 이미 오래된 값일 수 있습니다. setCount(prev => prev + 1)은 항상 최신 이전 State를 인자로 받아 정확한 계산이 가능합니다.
Q5. 객체 State를 업데이트할 때 다음 중 올바른 방법은?
const [user, setUser] = useState({ name: '홍길동', age: 25 });
💡 객체 State도 불변성을 유지해야 합니다. 스프레드 연산자로 기존 객체를 복사하고 변경할 속성만 덮어씁니다. user.age를 직접 수정하면 React가 변경을 감지하지 못해 화면이 업데이트되지 않습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.