[React 기본] 5. event

 

 

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

이 포스팅은 이전의 포스팅과 이어집니다.

2022.07.07 - [Develop/react] - [React 기본] 4. props

 

 

+ 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다.

영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합니다.!

https://opentutorials.org/course/4900

React - 생활코딩

 

 

---

 

Event

자바스크립트에서 이벤트는 어떤 행동을 했을 때, 미리 만들어 놓은 특정한 함수(이벤트)가 작동하도록 하는 것을 말한다.

 

이 이벤트를 우리의 컴포넌트에서도 발생하도록  코드를 짜보자.

 

 

---

onChangeMode라는 함수를 만들어서 기능을 만들어 볼 것이다.

 

해당 이벤트는 우리가 링크 ( html, css, javascript ) 를 클릭했을 때, 사이트의 상태를 변화시키는 기능을 할 것이다.

 

onChangeMode가 추후 어떤 기능을 할 것인지는 일단 여기까지만 알아보도록 하고, 

 

이벤트가 발생하도록 해보자.

 

 

 

제일 먼저 메인인 WEB을 클릭했을 때, 경고창을 이용하여 특정 문구가 나타나도록 해볼 것이다.

 

WEB이라는 위 문구가 a태그로 만들어져 있기 때문에, 원래 기능대로라면 해당 링크로 페이지가 이동될 것이기 때문에

 

최우선적으로 a태그의 작동을 막아주어야 한다.

 

이를 위해서 사용하는 것이 event의 preventDefault이다.

 

event 객체의 preventDefault를 이용해 a태그의 작동을 막아주었다.

여기서의 event 객체는 DOM과 관련된 이벤트의 모든 정보가 저장되어 있는 객체이다.

 

이제 a태그의 작동을 막아주었으니 App의 Header 컴포넌트에 코드를 추가해보자.

 

 

Header 컴포넌트에 onChangeMode 라는 속성을 추가해주었고 해당 속성은 함수로 이루어져 있으며, 작동될 시 

경고창으로 " 나 잘 작동해요~" 라고 표현되게 했다.

 

이제 다시 위의 컴포넌트로 돌아와서 이 onChangeMode라는 함수가 클릭시 (onClick) 작동하도록 하면 된다.

 

앞서 속성으로 전해준 값들은 모두 props에 저장된다고 했으므로, props에서 꺼내어 함수를 작동하도록 하면 된다.

 

 

클릭시 잘 작동하는 모습

 

 

 

 

---

이제 이벤트를 만들고 작동시키는 기본적인 방법을 알게 되었으니

 

 

위의 각 항목을 클릭했을 때, 자신의 id 값이 alert 창으로 나타나도록 코드를 작성해보자.

 

위와 같이 코드를 짜보자.

 

먼저 이해하기 쉽도록 li 태그를 개행을 이용해 정리해주고, 코드를 작성하면 좀 더 가독성 있게 코딩을 할 수 있다.

 

 

이번에도 onChangeMode라는 함수를 만들어주고, a태그를 클릭했을 경우 해당 함수가 작동하도록 하면 된다.

 

onChangeMode 함수 만들기

 

onChangeMode 함수가 작동하도록 해주었다.

 

event의 target이라는 객체는 자신을 부른 태그를 지칭하는 키워드라고 생각하면 된다.

 

따라서 a태그에서의 event.target.id는 a태그의 id를 의미하는 것이므로, 이를 인자로 넘겨주고,

 

a태그에 새롭게 id속성을 추가해주었다.

 

정상적으로 잘 작동하는 것을 확인할 수 있다.