<Subject> 컴포넌트 안에 있는 링크를 클릭했을 때
<Subject> 바깥 쪽에 있는 앱의 state를 변경하는 작업을 통해 event programing에 대해 알아보자.

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

event programing

• <Subject>

<header>
        <h1>
          <a href='/' onClick = {function () 
          {alert('HI');}}>
            {this.props.title}
          </a>
 . . . 

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

• 이때 자바스크립트 코드는 onclick이다.
• 하지만 리액트는 onClick을 통해 사용한다.
  onClick 이벤트가 발생할 때 경고창을 띄우도록 코드를 작성하였고
  우리가 정의한 이름 없는 사용자 함수는 링크를 클릭했을 때 실행되도록 약속되어 있다.

이 코드는 정상적으로 실행되지만 ok를 누르면 페이지가 reload되어버리는 문제가 발생한다.
다시 말해, reload를 하지 않고도 역동적인 사이트를 만들 수 있다는 리액트의 장점이 사라지게 된다.

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

이벤트 객체 'e'

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

• Subject.js <heaer>내부

<h1>
  <a href='/' onClick={function (e) {
    console.log(e); // 이벤트 매개변수 e 출력
    debugger;
    alert('HI');
  }}>{this.props.title}
  </a>
</h1>

• 결과 화면
  

chrome 개발자 도구에서 위 코드처럼 작성할 때 "debugger"라는 코드를 만나면
브라우저는 "debugger"라고 되어 있는 부분에서 실행을 멈추고 sources라는 페이지로 이동해 정보들을 보기 쉽게 해준다.

SAMPLETITLE링크를 클릭하면 "debugger"라고 하는 키워드로 인해 실행이 멈추고 우리를 기다리고 있는 상태가 된다.
funcion의 첫번째 인자 "e"는 바로 이벤트를 핸들링 할 수 있도록 주입되는 정보다.

e.preventDefault()라고 하는 함수는 "e"라고 하는 객체에 속해 있다.
e.preventDefault()함수는 이벤트가 발생한 태그가 기본적인 동작방법을 못하게 막는 것이다.
즉, 이 함수를 이용해 <a>태그의 기본적인 동작방법을 금지시킬 수 있다.

• Subject.js <heaer>내부

<h1>
  <a href='/' onClick={function (e) {
    console.log(e); // 이벤트 매개변수 e 출력
    // debugger;
    e.preventDefault(); // a 태그의 동작을 금지함
    alert('HI');
  }}>{this.props.title}
  </a>
</h1>

결과 화면

이제 링크를 클릭할 때 마다 e가 어떤 정보를 가지고 있는지 console에 출력해주며
preventDefault()함수를 통해 페이지가 이동되지 않게 할 수 있다.