하루에 3장씩 숑숑 해볼 예정!
4장. 이벤트 핸들링
이벤트(event)란 정확히 무엇을 의미할까?
→ 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것!
HTML에서는 <button onclick=" ">처럼 이벤트 실행 시 " " 사이의 JS 코드를 실행하게끔 작성했다.
그렇다면 React에서는...?
4-1) React 이벤트 시스템
사실 어제 이벤트를 써봤었다!
이렇게 보니 HTML에서의 사용법과 유사한데... 몇 가지 주의 사항이 존재한다!
1. 이름은 카멜 표기법으로!
2. 이벤트에 실행한 JS 코드가 아닌, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트 설정 가능
여기서 3번이 무슨 뜻인고하니...
div, button, input, form 등의 DOM 요소에는 이벤트를 설정할 수 있지만,
우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다는 것!
(물론 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정하면 된다 → <div onClick={this.props.onClick}>처럼!)
4-2) 이벤트 핸들링 익히기
무슨 소리인지 긴가민가 할 때는 실습만큼 좋은 게 없다!
컴포넌트 생성 및 불러오기 → onChange 이벤트 핸들링하기 → 임의 메서드 만들기
→ input 여러 개 다루기 → onKeyPress 이벤트 핸들링하기 순으로 진행될 예정!
1. 컴포넌트 생성 및 불러오기
EventPractice.js
역시 src 폴더 내에 EventPractice.js 파일을 만들어주자!
App.js
App.js에서 만든 컴포넌트를 렌더링!
2. onChange 이벤트 핸들링하기
EventPractice.js
EventPractice 컴포넌트의 input 요소에 onChange 이벤트를 설정!
input에 내용을 입력하면 console 창에 이벤트 객체가 나타난다!
우리가 console에 기록한 e 객체는 SyntheticBaseEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체...(라고 한다)
그런데 이렇게 작성할 경우 이벤트가 끝나고 나면 이벤트가 초기화되고 만다.
즉 객체 내부의 모든 값이 비워지기 때문에 정보를 참조할 수가 없는 것!
따라서 비동기적으로 이벤트 객체를 참조할 때는 e.persist() 함수를 호출해줘야 한다.
여기서는 onChange 이벤트가 발생할 때, 앞으로 변할 input 값인 e.target.value를 기록한 것.
값이 바뀔 때마다 console에 바뀌는 값이 찍히는 모습!
그렇다면 해당 input의 값을 state에 담기 위해서는?
쨔잔. 어제 배운 useState를 이용해 담아주면 된다!
2021.03.09 - [Frontend/React] - 리액트를 다루는 기술 _ 1장, 2장, 3장
리액트를 다루는 기술 _ 1장, 2장, 3장
약 1주일 간 JavaScript 복습 및 실습을 완료한 후... 다시 펴보는 책! 참말로 두껍기도 하다! 함께 차근차근 따라 해 볼 예정. 1장. 리액트 시작 1-1) 작업 환경 설정 시작하려고 신나게 create-react-app을
23life.tistory.com
나온 김에 한 번 더 짚어보고 가자!
그런데 정말로 state가 제대로 설정되었는지 궁금하다...!
이를 확인하기 위해 button을 하나 만들고, 클릭 이벤트가 발생하면 입력한 값을 띄워주도록 해보자.
쨘. button에 클릭 이벤트 발생 시 message를 띄워준 후 입력창을 초기화(setMessage('')) 해준다.
잘 뜨는구만!
3. 임의 메서드 만들기
이전 주의사항 중 이벤트에 실행한 JS 코드가 아닌, 함수 형태의 값을 전달 이란 항목이 있었다.
따라서 지금까지는 이벤트를 처리할 때 렌더링과 동시에 함수를 만들어 전달해줬다!
하지만 이 방법 대신, 함수를 미리 준비해 전달함으로써 가독성을 높이는 방법도 존재한다.
EventPractice.js
이런 식으로!
바벨의 transform-class-properties 문법(이라나 뭐라나)을 사용해 화살표 함수 형태로 메서드를 정의한 모습이다.
4. input 여러 개 다루기
그런데 만약 input이 여러 개라면?
EventPractice.js
이렇게 onChange 함수를 2개 만들어주면 된다!
5. onKeyPress 이벤트 핸들링
열심히 입력을 한 후... 사람들은 습관적으로 엔터키를 누르기 마련이다!
따라서 input 창에서 enter를 눌렀을 때 onClick이 호출되도록 만들 예정.
EventPractice.js
쨘. 마지막 input 창에서 KeyPress(키를 눌렀을 때 발생) 이벤트를 처리해준 모습!
이제 끝...! 이기는 한데, 만약 input창이 100개 1000개 10000개가 된다면?
해당 input을 처리할 메서드를 몽땅 만들 수는 없는 노릇.
길기도 하다!
우선 여기서 useState를 통해 사용하는 상태에 문자열이 아닌 객체를 넣어줬다.
e.target.name(이벤트 발생한 input의 name값)을 활용해 input 별 메서드를 따로 만들지 않아도 구분할 수 있도록 한 것!
userState를 쓸 때 input 값들이 들어 있는 form 객체를 사용하면 e.target.name의 값을 이용할 수 있다.
이를 통해 각 input에 지정해둔 name으로 해당 값의 속성이 무엇인지를 알 수 있게 되었다!!
즉 각 input에서 onChange 이벤트가 발생하면,
... form으로 기존 form 내용을 복사한 뒤,
[e.target.name] : e.target.value로 원하는 값을 덮어 씌워줬다!
이렇게 새로 만들어진 form을 nextForm이라는 변수에 담아 setForm에 전달!
이렇게 매번 form을 만드는 것 역시 번거롭지 않나?
→ 이후 useReducer와 커스텀 Hooks를 통해 이 작업을 훨씬 편하게 할 수 있단다!
이를 통해 하나의 onChange 함수로 각 input 별 state를 name 속성으로 줄 수 있다! 와우!
'source-code > React' 카테고리의 다른 글
| 리액트를 다루는 기술 _ 6장 (0) | 2021.03.09 |
|---|---|
| 리액트를 다루는 기술 _ 5장 (0) | 2021.03.09 |
| 리액트를 다루는 기술 _ 1장, 2장, 3장 (1) | 2021.03.09 |
| React Component, props, state 맛보기 (2) | 2021.01.20 |
| React 맛보기 (0) | 2021.01.19 |
