들어가기 전에

 이번 시간에는 리액트에서 event programing 을 하는 법을 살펴보겠습니다.

APP 컴포넌트에서 먼저 직접 event programing을 하고 다시 패키징을 진행하겠습니다.

학습목표

이벤트를 설치하는 방법과 이벤트가 발생했을때 기본 동작방법을 막는 방법 이해할 수 있습니다.

핵심단어

• event 'e'
• preventDefault

강의 듣기

이번 시간에는 <Subject> 컴포넌트 안에 있는 링크를 클릭했을 때

<Subject> 바깥 쪽에 있는 앱의 state를 변경하는 작업을 통해 event programing에 대해 알아보겠습니다. 

그 전에 <Subject> 컴포넌트의 내용을 App에 먼저 도입해서 직접 event programing 를 구현해보겠습니다.

<header>
     <h1><a href="/" onClicn{function () {
         alert( 'Hi' );
      }>{this.state.subject.title}</a></h1>
     {this.state.subject.sub}
</header>

위의 코드는 <Subject> 컴포넌트 안에 있는 내용을 APP 컴포넌트로 변경한 코드입니다. 

<a> 라는 링크를 클릭할 때 어떤 자바스크립트 코드가 실행되게 이벤트를 구현해야 합니다.

이때 자바스크립트 코드는 onclick입니다. 하지만 리액트는 onClick을 통해 사용합니다.

onClick 이벤트가 발생할 때 경고창을 띄우도록 코드를 작성했습니다.

우리가 정의한 이름 없는 사용자 정의함수는 링크를 클릭했을 때 실행되도록 약속되어 있습니다.

이코드는 정상적으로 실행되지만 ok를 누르면 페이지가 reload되어 버리는 문제가 발생합니다.

다시 말해, reload를 하지않고도 역동적인 사이트를 만들 수 있다는 리액트의 장점이 사라지게 됩니다.

이를 막기 위해 <a>태그를 클릭했을 때 href 속성이 가리키는 페이지로 이동하는 기본적인 동작방법을 막아야 합니다.

이벤트 객체 'e'

리액트는 onclick 이벤트가 실행될 때 함수의 첫번째 매개변수의 값으로 이벤트 객체를 주입하기로 약속되어 있습니다.

<header>
     <h1><a href="/" onClicn{function (e) {
         console.log(e);
         debugger;
         alert( 'Hi' );
      }>{this.state.subject.title}</a></h1>
     {this.state.subject.sub}
</header>

chrome 개발자 도구에서는 위의 코드처럼 작성할 때 "debugger" 라는 코드를 만나면

브라우저는 "debugger"라고 되어 있는 부분에서 실행을 멈추고 sources라는 페이지로 이동해서 정보들을 보기 쉽게 해줍니다.

실제로 링크를 클릭하면 "debugger"라고 하는 키워드로 인해서 실행이 멈추고 우리를 기다리고 있는 상태가 됩니다.

function의 첫번재 인자 "e"는 바로 이벤트를  핸들링할 수 있도록 주입되는 정보입니다.

e.preventDefault();

"e.preventDefault()" 라고 하는 함수는 "e" 라고 하는 객체에 속해있습니다.

"e.preventDefault()" 함수는 이벤트가 발생한  태그가 기본적인 동작방법을 못하게 막는 것입니다.

즉, 이 함수를 이용해 <a> 태그의 기본적인 동작방법을 금지시킬 수 있습니다. 

<header>
     <h1><a href="/" onClicn{function (e) {
         console.log(e);
         e.preventDefault();
         alert( 'Hi' );
      }>{this.state.subject.title}</a></h1>
     {this.state.subject.sub}
</header>

최종적으로 링크를  클릭할 때마다 e가 어떤 정보가 있는지 console에 출력이 되며

preventDefault() 함수를 통해 페이지가 이동되지 않아도록 수정되었습니다.

생각해보기

 정리정돈한 Subject 컴포넌트를 APP 컴포넌트로 코드를 옮길 때 어떤 문제가 발생할까요?