상호작용 추가하기 2

[ React 공식문서 ] 상호작용 추가하기 (1) : 이벤트에 응답하기

1. 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 JSX 태그에 props 로 전달해야 한다 export default function Button() { return ( I don't do anything ); } 이 버튼을 클릭하면 Alert 을 띄우는 기능을 추가하려면 다음의 세 가지 단계를 거쳐야 한다 Button 컴포넌트 안에 handleClick (이름은 단순히 함수명으로 원하는 대로 지으면 됨) 이라는 함수를 선언 해당 함수 내부의 로직 구현 태그에 onClick porps 로 handleClick 추가 export default function Button() { function handleClick() { alert('You clicked me!'); } r..

[ React 공식문서 ] 상호작용 추가하기 (0) : 훑어보기

화면의 일부 항목은 입력에 따라 업데이트 된다. 이번 챕터에서는 state를 업데이트하고, 시간에 따라 다른 값을 보여주는 컴포넌트를 작성하는 방법을 배울 것 1. 이벤트에 응답하기 이벤트 핸들러는 사용자 상호작용에 반응해서 호출되는 자체 함수다 과 같은 기본 제공 컴포넌트는 onClick 과 같은 기본 제공 브라우저 이벤트만을 지원한다 하지만, 컴포넌트 생성하고 이벤트 핸들러 props 로 원하는 이름을 지정할 수 있 function Toolbar({ onPlayMovie, onUploadImage }) { return ( Play Movie Upload Image ); } export default function App() { return ( alert('Playing!')} onUploadImag..