[Reacte] Component Event 만들기

 

📌 컴포넌트 이벤트 만들기

---

 

return (
  // Component를 만들 때는 반드시 하나의 최상위 Tag만 (딱 하나) 써야 한다.
  <header>
    <h1><a href ="/" onClick={function(e) {
    e.preventDefault();

    this.props.onChangePage();

    }.bind(this)}> {this.props.title}</a></h1>
    {this.props.sub}
  </header>
);

 

컴포넌트를 만들고, 사용자 정의 이벤트를 실행하고 싶을 때,

 

<Subject
  title={this.state.subject.title}
  sub={this.state.subject.sub}
  onChangePage = 
  >
</Subject>

 

위와 같이 onChanePage라는 이벤트를 만들어서 특정 함수가 호출되게 할 수 있는 것이에요.

 

App.js에서 위와 같이 onChanePage Event에 함수를 만들고,

 

{/*State화 한 뒤 코드*/}
<Subject
  title={this.state.subject.title}
  sub={this.state.subject.sub}
  onChangePage = {function () {
  alert('hihihi');
  }.bind(this)}
  >
</Subject>

 

 

Subject.js에 위와 같이 a Tag를 눌렀을 때, 함수가 실행되는데, e.prevenDefulat()로 먼저 Reload를 방지해주고, App.js에 있는 onChagePage Event를 함수 형식으로 호출해 주는 것이에요.

 

 

이렇게 해주면 WEB을 클릭했을 때, 설정 해준대로 경고창이 뜨는 것이에요.

 

 

<Subject
  title={this.state.subject.title}
  sub={this.state.subject.sub}
  onChangePage = {function () {
  this.setState({
  mode:'welcome'
  });
  }.bind(this)}
  >
</Subject>

반응형

 

App.js에서 이번에는 setState()에 모드값을 welcome으로 주게 되면

 

 

처음에는 위와 같이 보이다가 WEB을 클릭하게 되었을 때

 

 

 

위와 같이 변경되는 것이에요.

 

 

💡참고 : Number() 는 문자열을 정수로 형변환 해준다.

 

        while (i < data.length) {
            lists.push(
                <li key={data[i].id}>
                    <a href={"/content/" + data[i].id}
                       data-id = {data[i].id}
                       onClick={function (e) {
                         e.preventDefault();
                         this.props.onChangePage(e.target.dataset.id);
                       }.bind(this, data[i].id)}
                        >{data[i].title}
                    </a>
                </li>
            );
            i = i + 1;
        }

 

 

위와 같이 Nav.js에서 bind 함수에 data[i].id를 두번째 매개변수로 주게 되면 onClick의 function 매개변수에 현재는 e가 있으나, 이게 뒤로 한 칸 밀리고, bind에서 준 매개변수가 첫번째로 오게 되는 것이에요.

 

props와 state는 모두 render()를 호출하는 것이에요.

사용자의 props로 컴포넌트 내에 있는 State를 사용하는 것이지요. 이 상태가 실제 웹 브라우저 HTML 다른 말로 DOM이라는 것에 영향을 줘서 보여진답니다!

어떤 컴포넌트가 하위 컴포넌트에 값을 전달하고자 할 때는 Props를 통해서 전달하지만, 상위 컴포넌트에게 값을 전달할 때는 이벤트를 통해서 전달하게 되는 것이에요. (Props는 Read Only이기 때문)