React 컴포넌트에 이벤트 만들기.

이전에 진행하던 실습을 이어서 하고 있지만 내용이 왔다갔다 할 예정이다. ( 이해하면 다시 정리하면서 글을 쓸 예정. )

지금 공부하고 있는 내용은 컴포넌트에 이번트 함수를 만들고, 

App 컴포넌트에 이벤트 함수를 호출해 볼 것이다. 

 

App 컴포넌트 안에 있는 Subject 컴포넌트 이다. 

<Subject

          title={this.state.subject.title}

          sub={this.state.subject.sub}>

</Subject>

 

여기에 onChagnPage 이벤트를 줄 것이다. 

        <Subject

          title={this.state.subject.title}

          sub={this.state.subject.sub}

          onChangPage={function(e){

            this.props.setState({mode:'welcome'});

          }}>

        </Subject>

 

onChangPage 이벤트는 컴포넌트 안에 링크를 클릭했을 때,

이벤트에 설치한 함수를 불러올 수 있게 도와준다. 

this.props.setState({mode:'read'}) => 현재 상태는 constructor 안 state 에 지정되어 있다. 

컴포넌트 안에서 또 state 를 사용하게 되면 오류가 발생한다. state의 상태가 변경되기 때문에

setState를 사용해 주어야 오류가 안난다 !! 

 

호출 준비는 끝났고, 이제 Subject 컴포넌트 안에 이벤트 함수를 짤 것이다. 

 

Subject 컴포넌트이다. 

class Subject extends Component {

    render(){

      return(

        <header>

        <h1><a href="1.html" onClick={function(e){

          e.preventDefault();

          this.props.onChangPage();

        }.bind(this)}>

        {this.props.title}</a></h1>

        {this.props.sub}

    </header>

      );

    }

  }

<a> 태그에 onClick 이라는 클릭 이벤트를 React 문법에 맞춰서 주었다.

함수 내용은

e.preventDefault => 클릭을 했을 때, 새로고침이 되지 않게 막기 위함이다. 

this.props.onChangPage ( ) => App 컴포넌트에 주었던 onChangPage 를 위함이다.

bind(this) => 함수안 this 는 값을 찾지 못한다. bind 를 통해 this 의 값을 컴포넌트로 지정해 준다. 

 

,

,

,

 

생각보다 이벤트를 주는데 간단한? 느낌이다. 

 

App 컴포넌트에는 onChangPage 이벤트를 주고, 

 

해당 컴포넌트에는 onClick 이벤트를 통해 <a> 태그가 클릭되었을 때 함수가 실행 되도록 해준다. 

확실히 javascript 내용이 비슷한듯 먼가 조금씩 더 있는 느낌이다. 

 

이벤트가 다양해지고, 좀 더 인터렉티브 해진다면 어려워 지겠지..? 

일단 손이 익을 때 까지 계속 연습할 것이다. 오늘은 여기까지 ! 

 

다른 내용은 아직 미흡한 부분이 있어서 아직 글을 못쓰겠다. 다시 이해하고 준비할 예정이다.