[리액트]이벤트 핸들러

 

자식컴포넌트에서 발생한 이벤트를 부모컴포넌트에서 핸들링하고싶을때가 있다.

 

1.부모컴포넌트에 핸들링함수를 만든다.

2.자식컴포넌트에 props로 넘겨준다.

3.자식컴포넌트에서 이벤트 발생시 해당 props 함수를 호출한다. 필요한 값은 인자로 넘기면 된다.

컴포넌트끼리 핸들링함수의 인자를 통해 연결된다.

<App.js>

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css"; //일케해놓으면 App 컴포넌트가 로드될때 같이 import돼서 쓸수있게된다. 즉 <App/> 얘가 쓰일때
//css가 따라오게끔. 동적로드하는 효과.
import Subject from "./components/Subject";
import Content from "./components/Content";
import Article from "./components/Article";
import Controls from "./components/Controls";
import CreateForm from "./components/CreateForm"
import UpdateForm from "./components/UpdateForm"
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "WEB", desc: "world wide web!" },
      mode: "welcome",
      selected: 0,
      contents: [
        { id: 0, title: "HTML", desc: "HyperText Management Language" },
        { id: 1, title: "CSS", desc: "씨에스에스" },
        { id: 2, title: "javascript", desc: "자바스크립트" }
      ]
    
    };
  }
 
  getContent() {
 
    var _mode=this.state.mode;
    if (_mode === "read") {
      var article = this.state.contents[this.state.selected];
      return <Article article={article}></Article>;
    } else if (_mode === "welcome") {
      return <Article article={this.state.subject}></Article>;
    } else if(_mode==="create"){
      return <CreateForm addContent={this.addContent.bind(this)}></CreateForm>;
    } else if(_mode==="update"){
      return <UpdateForm data={this.state.contents[this.state.selected]} updateContent={this.updateContent.bind(this)}></UpdateForm>;
    }
  }
  addContent(title,desc){
    var len=this.state.contents.length;
    var newContents=Array.from(this.state.contents);
    newContents.push({id:len,title:title,desc:desc});
    this.setState({
      contents:newContents,
      mode:'read',
      selected:len
    })
  }
  updateContent(id,title,desc){
    var newContents=this.state.contents;
    newContents[id].title=title;
    newContents[id].desc=desc;
    this.setState({
      contents:newContents,
      mode:'read',
      selected:id
    });
  }
  changeMode(mode){
    this.setState({
      mode:mode
    });
  }
 
  changeArticle(i) {
    this.setState({
      mode:'read',
      selected: i
    });
  }
  render() {
    return (
      <div>
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onClicked={this.changeMode.bind(this)}
        ></Subject>
        <Content
          contents={this.state.contents}
          onClicked={this.changeArticle.bind(this)}
        ></Content>
        <Controls
          controls={this.state.controls} onClicked={this.changeMode.bind(this)}
        ></Controls>
        {this.getContent()}
      </div>
    );
  }
}
export default App;
 

Content 컴포넌트를 사용할때, chageArticle 메서드를 넘겨준다.

이 때 bind를 해주는 이유는

자바스크립트에서 this키워드는 해당 객체를 나타내는게 아니라 어디서 호출되는가를 나타낸다.
changeArticle 메서드는 전역객체에서 호출되기 때문에 함수 내 코드에 this.setState의 this는 전역객체를 가리키게 된다.

당연히 전역객체에 state가 없기 때문에 오류가 난다.

이 메서드를 누가 호출 하는것 인가를 지정해줘야 한다.

bind(this)를 해주면 이 메서드는 호출될때 App컴포넌트 객체에서 호출된다는 뜻이 되어서

this.setState를 할 때 애가 App컴포넌트객체라고 생각하고 작동한다.

 

this랑 bind에 대한 개념은 이 형님이 잘 정리해 놓으셨다.

https://blueshw.github.io/2018/03/12/this/

https://blueshw.github.io/2018/03/12/this/

 

<Content.js>

import React, { Component } from "react";
import { tsConstructorType } from "@babel/types";
class Content extends Component {
  constructor(props) {
    super(props);
    
  }
  changePage(e){
    e.preventDefault();
    this.props.onClicked(e.target.dataset.id);
    
  }
  render() {
    var list = [];
    var data=this.props.contents;
    var i=0;
    while(i<data.length){
      var li=<li><a href='#' data-id={data[i].id} onClick={this.changePage.bind(this)}>{data[i].title}</a></li>
      list.push(li);
      ++i;
    }
    return (
      <nav>
        <ul>{list}</ul>
      </nav>
    );
  }
}
 
export default Content;
 

자식 컴포넌트에서는 a태그를 쫙 깔아주는데

onClick=핸들링함수 일케 해주면 이벤트가 알아서 해당 함수의 인자로 전달된다.

changePage함수가 실행되고 이 때도 마찬가지로 바인딩을 해줘야 changePage 내부의 this키워드를 제대로 사용할 수 있다.

 

e.preventDefault()로 a태그가 기본적으로 수행하는 이벤트처리를 막아주고

this.props.onClicked()를 호출한다. 즉 App컴포넌트에서 넘어온 핸들링 함수를 수행한다.

html5부터 추가됐다던가 뭐던가 하튼간 태그에 data-로 시작하는 속성을 달아주면

dataset안에 속성명으로 속성들이 생긴다.

data-id={} 이런식으로 id값들을 세팅해줬기 때문에 이제 a태그의 dataset속성 안에 id값들이 배정된다.

e.target으로 이벤트가 발생된 a태그를 찾아내고 dataset에 id를 찾아내서

App컴포넌트에서 props로 넘어온 함수에 인자로 넘긴다.

 

그럼 App컴포넌트에선 클릭된 놈의 내용을 맨 밑에 띄워준다.

onClicked말고도 값이 변경될때마다 냄새를 맡는 onChange도 있고

form에서는 onSubmit 쓰면된다.

 

<UpdateForm.js>

import React, { Component } from "react";
class UpdateForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.data.id,
      title: props.data.title,
      desc: props.data.desc
      
    };
    this.changeHandler=this.changeHandler.bind(this);
  }
  changeHandler(e){
      this.setState({[e.target.name]:e.target.value});
      //javascript 신종문법!
      //if e.target.name==='title'이면 title:바꿔야하고 이런거 대신에 []로 처리해주면땡
  }
  render() {
    return (
      <div>
        <form
          action="#"
          method="post"
          onSubmit={function(e) {
            e.preventDefault();
 
            var title = e.target.title.value;
            var desc = e.target.desc.value;
            this.props.updateContent(this.props.data.id, title, desc);
          }.bind(this)}
        >
          <input
            name="title"
            value={this.state.title}
            placeholder="title"
            onChange={this.changeHandler}
          ></input>
          <input
            name="desc"
            value={this.state.desc}
            placeholder="desc"
            onChange={this.changeHandler}
          ></input>
          <input type="submit"></input>
        </form>
      </div>
    );
  }
}
 
export default UpdateForm;
//그냥 input으로 놓으면 값이 변경이안된다
/* 따라서 자신의 state에 title,desc를 세팅해놓고 input에서 이벤트가 발생할때마다 (onChange=)
state의 title,desc가 바뀌게끔 해줘야한다. 그러면 자동으로 input의 value도 바뀐값을 참조하게되므로 input에 있는 값이 바뀐다.
이때 굳이 props로 넘어온걸 state에 할당해서 바꿔주는이유는, props는 R/O이기 때문이다.
*/
 

내용을 업데이트 해주는 form이다.