본문 바로가기
React/React 기본

[생활코딩] React - 컴포넌트 이벤트 만들기

by 닉우 2020. 8. 20.

태그에 이벤트를 직접 만들어서 그 태그, 컴퍼넌트를 사용하는 사람들이

이벤트 프로그래밍을 할 수 있도록 하는 방법이 있다. (이벤트의 소비자가 아닌 생성자)


설명하기 쉽도록 기존 subject컴퍼넌트를 주석처리하고 app에 subject를 직접 입력 해둔거다.


다시 원래대로 돌려놓고


 

이 subject라고 하는 컴퍼넌트는 onChangePage라는 이벤트가 있어서 이 컴퍼넌트 안에서

링크를 클릭했을 때 이벤트에 설치한 함수를 호출하도록 만들것이다.

 

onChangePage 함수는 어떤 형태로 subject로 전달될까? 바로 props

 


Subject.js

실행됐을 때 첫 번째 인자로 이벤트 객체가 전달되는데, 

그 객체에 preventDefault()를 실행해서 페이지가 새로고침 되는것을 방지한다.

 

WEB을 클릭해보면 아래 코드와 같이 경고창이 잘 뜬다.


경고창이 뜨도록 만든 부분의 코드를 아래와 같이 수정해보자.

그러면 클릭시 mode가 read에서 welcome으로 바뀌게 된다.


 

댓글