8강. Handling Events
확인버튼 컴포넌트를 직접 만들고, 클릭 이벤트에 event handler를 연동하는 실습
(클래스 컴포넌트와 함수 컴포넌트를 모두 실습)
① 클릭 이벤트 처리하기 실습
1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기
2. chapter_08이라는 이름의 폴더를 생성
3. 만든 폴더에 ConfirmButton.jsx라는 이름의 파일을 새로 만들고, ConfirmButton이라는 이름의 클래스 컴포넌트를 만든다.
- ConfirmButton 컴포넌트는 확인 여부를 저장하기 위해 state에 isConfirmed라는 변수를 하나 가지고 있으며, 초기값은 false
- Button의 onClick 이벤트를 처리하기 위해서 event handler로 handleConfirm이라는 함수를 만들어 넣어줌
→ bind를 사용하는 방식으로 event handler를 처리
4. ConfirmButton 컴포넌트를 화면에 렌더링하기 위해 index.js 파일 수정
방금 새로 만든 ConfirmButton 컴포넌트를 import해서 ReactDOM.render 함수에 넣어주는 코드
5. 리액트 애플리케이션 실행
VS Code의 상단 메뉴에서 Terminal > New Terminal을 눌러 새로운 터미널 실행
npm start 명령 실행
잠시 뒤 웹브라우저에 새 창이 열리면서 localhost 3000번 포트에 접속
화면에는 확인 버튼이 나옴
확인 버튼을 누르면 클릭 이벤트가 event handler로 전달되고, isConfirmed의 값이 true로 바뀌면서 위와 같이 버튼이 비활성화됩니다!
② Class fields syntax 사용하기 실습
앞에서 만든 ConfirmButton 컴포넌트의 event handler를 bind 대신 Class fields syntax를 사용하도록 변경해보겠습니다.
1. constructer에 있는 bind 코드를 제거
2. Arrow function을 사용하도록 event handler 수정
3. 실행
코드를 수정한 이후 실행해보면, 이전과 동일한 결과가 나오는 것을 확인할 수 있습니다.
③ 함수 컴포넌트로 바꿔보기
- ConfirmButton 컴포넌트를 함수 컴포넌트로 변경
- 클래스 컴포넌트는 거의 사용하지 않기 때문에 지금 구현한 함수 컴포넌트의 형태를 잘 기억해둡시다!
1. ConfirmButton 컴포넌트를 함수 컴포넌트로 변경
state는 useState 훅을 사용하여 처리하였고,
event handler는 arrow function을 사용하여 만들었습니다.
2. 저장 후 실행
이전과 동일한 결과를 확인할 수 있습니다.
'개발공부 > REACT' 카테고리의 다른 글
| 조건부렌더링을 사용하여 로그인 여부를 나타내는 툴바 만들기 실습 [처음 만난 리액트 #27] (0) | 2023.02.17 |
|---|---|
| Conditional Rendering의 정의, JavaScript의 Truthy와 Falsy, Element Variables의 개념, Inline Conditions [처음 만난 리액트 #26] (0) | 2023.02.16 |
| Event의 정의 및 Event 다루기 [처음 만난 리액트 #24] (0) | 2023.02.10 |
| Hooks 사용해보기 실습 (useState, useEffect Hook 사용, Custom hook 만들기) [처음 만난 리액트 #23] (0) | 2023.02.06 |
| [Java] 자바 JDK 삭제/설치 방법 (Java 버전 11) (0) | 2023.02.06 |
