이벤트 핸들링 - onClick, onChange 마스터
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 버튼 클릭 이벤트 핸들러를 올바르게 연결한 것은?
💡 React에서 이벤트 핸들러는 camelCase 속성명(onClick)으로 함수 참조를 전달합니다. B처럼 괄호를 붙이면 렌더링 시 즉시 실행됩니다. A는 HTML 방식(문자열)이고, D는 잘못된 속성명입니다.
Q2. onChange 이벤트 핸들러에서 사용자가 입력한 현재 값을 가져오려면?
💡 onChange 핸들러의 event 객체에서 현재 입력값은 event.target.value로 접근합니다. event.target은 이벤트가 발생한 DOM 요소(input)를 가리키고, .value는 해당 요소의 현재 값입니다.
Q3. React의 합성 이벤트(SyntheticEvent)에 대한 설명으로 옳은 것은?
💡 React의 합성 이벤트는 브라우저마다 다른 이벤트 동작의 차이를 추상화하여, 모든 브라우저에서 동일하게 동작하는 일관된 인터페이스를 제공합니다. preventDefault(), stopPropagation() 등 네이티브 이벤트와 동일한 API를 지원합니다.
Q4. 상태 업데이트 시 가장 안전한 방법은 무엇인가요?
💡 함수형 업데이트(setCount(prev => prev + 1))는 항상 최신 상태값을 인자로 받기 때문에 비동기 업데이트나 클로저 문제로 인해 오래된 값을 참조하는 문제를 방지합니다.
Q5. 이벤트 핸들러에서 인자를 전달하는 올바른 방법은?
💡 인자를 전달할 때는 화살표 함수로 감싸서 () => handleClick(id) 형태로 작성합니다. A는 렌더링 시 즉시 실행되고, C와 D는 문법 오류이거나 잘못된 사용법입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.