들어가기 전에

지난 수업을 통해 우리는 evnet programming을 경험해봤습니다.

하지만 여러분의 컴포넌트에 이벤트를 만들어서 그 컴포넌트의 사용자들이 evnet programming을 할 수 있게 해본 적은 없습니다.

이제는 이벤트를 만드는 생산자가 되보겠습니다.

학습목표

이벤트를 직접 만들고 props 형태로 생성한 이벤트를 사용할 수 있습니다.

핵심단어

• event
• props
• preventDefault()

강의 듣기

지금까지 실습한 코드를 먼저 살펴보겠습니다.

<a> 태그를 클릭했을 때 "onClick"이라는 이벤트에 설치해놓은 사용자 정의 함수가 호출되면서

우리는 <APP> 컴포넌트의 mode 값을 'welcome'으로 바꾸도록 작성했습니다.

그런데 <header> 태그는 원래는 "subject.js" 안에 있던 코드였습니다. 이 것을 <Subject> 컴포넌트로 다시 패키징해보겠습니다.

이번 시간에 우리가 할 것은 <Subject> 컴포넌트에 onChangePage라는 이벤트가 있어서

이 컴포넌트 안에서 링크를 클릭했을 때 이 이벤트에 설치된 함수를 호출하도록 만드는 작업입니다.

onChangePage={ function() {
  alert('hihihi');
}.bind(this) }

<Subject> 컴포넌트에 onChagePage 라는 이벤트를 만들어보겠습니다.

그럼 <Subject> 컴포넌트는 페이지가 바뀔 때 컴포넌트의 사용자가 설정한 onChagePage 함수를 호출해주기만 하면 됩니다.

onChagePage라고 하는 함수는 props 형태로 <Subject>에 전달됩니다.

class Subject extends Component {
  render() {
    return ( 
      <header>
        <h1><a href="/" onClick={function(e){
           e.preventDefault();
           this.props.onChangePage();
         }.bind(this) } >{this.props.title}</a></h1>
        {this.props.sub}
      </header>
    );
  }
}

그럼 위의 코드처럼 작성할 수 있습니다. 링크를 클릭하여 onClick 이벤트가 발생할 때 함수가 실행이 됩니다.

함수가 실행될 때 첫번째 인자로 이벤트 인자가 전달되고,

'e' 객체의 preventDefault() 함수를 호출해서 링크를 클릭했을 때 페이지가 바뀌는 것을 막을 수 있습니다.

그 후, <Subject> 컴포넌트의 onChagePage() 함수를 호출하는 코드입니다.

작성한 코드를 실행시켜보면 정상적을 동작할 수 있는 것을 확인할 수 있습니다.

정리해보겠습니다. 우리는 <Subject> 컴포넌트에 onChagePage 라고 하는 이벤트를 만들고 ,그 안에 함수를 설치했습니다.

이제 onChagePage 이벤트가 발생할 때  props 로 전달되는 onChagePage() 함수를 호출하면 됩니다.

onChangePage={ function() {
  this.setState({mode:'welcome'});
}.bind(this) }

이번 시간의 계획대로 onChagePage ()함수가 <APP> 컴포넌트의 mode 값을 welcome으로 바뀌도록 수정하겠습니다.

이제 여러분은 이벤트의 소비자에서 벗어나 생산자가 되었습니다. 

생각해보기

 여러분의 프로그램에 어떤 이벤트를 추가하고 싶은가요?

그 이벤트는 어떻게 추가할 수 있을지 생각해보세요.