React 기초 03 · Events
이벤트 - 사용자 동작에 반응하기
버튼 클릭, 입력 변화 같은 사용자 동작 받기. onClick/onChange와 이벤트 객체, 핸들러에 값 넘기는 법.
1
먼저 비유로
초인종에 응답하는 거예요
사용자가 버튼을 누르거나 글자를 입력하면 React에 "초인종"이 울려요. 우리는 그 초인종마다 "이렇게 응답해" 하고 핸들러 함수를 붙여둬요. onClick은 클릭 초인종, onChange는 입력 변화 초인종이에요. 응답할 때 누가 눌렀는지 같은 정보는 이벤트 객체(e)에 담겨 와요.
보통 이 핸들러 안에서 state를 바꿔요. 그러면 앞에서 배운 대로 화면이 다시 그려지죠. "사용자 동작 → 핸들러 → setState → 화면 갱신"이 React 상호작용의 기본 리듬이에요.
2
직접 해보기
클릭 · 입력 · 값 넘기기
버튼을 눌러보고, 입력칸에 글자를 쳐보고, A/B/C를 골라보세요. 맨 위 마지막 이벤트 패널이 방금 무슨 동작이 들어왔는지 보여줘요.
직접 만져보세요
마지막 이벤트아직 없음
onClick
onChange - e.target.value
입력한 글자: (없음)
핸들러에 값 넘기기 - () => pick("A")
고른 값: (없음)
입력칸에 타이핑하면 onChange가 매 글자마다 울려요.
핵심은 이거예요
사용자 동작은 on이벤트={핸들러}로 받아요. 정보는 이벤트 객체(e)에서 꺼내고 (예: e.target.value), 핸들러에 값을 넘길 땐 화살표로 감싸요.
3
흐름으로 보기
동작이 처리되는 순서
- 1사용자가 버튼을 누르거나 입력칸에 글자를 쳐요.
- 2그 요소에 붙여둔 핸들러 함수가 호출돼요 (이벤트 객체 e와 함께).
- 3핸들러 안에서 보통 e.target.value 같은 정보를 읽고 setState를 불러요.
- 4state가 바뀌었으니 화면이 다시 그려지며 변화가 반영돼요.
4
코드로 보기
딱 이만큼이에요
function Form() { const [text, setText] = useState(""); return ( <> {/* 클릭에 반응 */} <button onClick={() => alert("안녕!")}>인사</button> {/* 입력 변화에 반응 - 이벤트 객체 e에서 값을 꺼낸다 */} <input value={text} onChange={(e) => setText(e.target.value)} /> {/* 값을 넘길 땐 화살표로 감싼다 (바로 pick("A")라고 쓰면 렌더 중 실행됨) */} <button onClick={() => pick("A")}>A 선택</button> </> );}5
조심하세요
처음에 꼭 헷갈리는 것
- 핸들러를 바로 호출하기.
onClick={pick("A")}는 렌더 중에 즉시 실행돼요.onClick={() => pick("A")}처럼 감싸야 "누를 때" 실행돼요. - e.target.value를 안 꺼내고 e만 쓰기. 입력값은 이벤트 객체 안의
e.target.value에 있어요. - form 제출 시 preventDefault 빼먹기. 폼 onSubmit에서
e.preventDefault()를 안 하면 페이지가 새로고침돼요.