이벤트

html에서 이벤트를 만들 때는 태그 안에 onclick="" 이런 식으로 이벤트를 만들었다.
하지만 리액트에서는 대문자가 바뀌니 유의해야 한다.
그리고 "" 가 아니라 {} 로 감싸고 그 안에 실행할 함수를 정의하면 해당 함수가 클릭시에 실행된다.

매개변수로 이벤트객체를 전달할 수 있다.

<a href="/" onClick={
    function(e) { console.log('hi'); }
    }>

setState

<a href="/" onClick={function (e) {
    e.preventDefault();
    // this.state.mode = "welcome";
    this.setState({
      mode: "welcome",
    });
  }.bind(this)}>
  {this.state.subject.title}
</a>

위 코드 스니펫에서 주석처리한 부분처럼 하게 되면 두 가지의 문제가 생긴다. 우선 function 내부에 this를 쓰게 되면 우리가 의도한 객체를 가리키지않고 undefined이기 때문에 에러가 발생한다. 그래서 함수 전체에다가 bind(this) 를 통해 그 문제를 해결할 수 있지만 그렇게 하더라도 주석처리한 코드로 실행을 하게 되면 state값이 변경되지 않는다.

이전에 우리가 하던 방식이 아닌 리액트가 원하는 방식으로 state를 바꿔주는 것이 바로 setState 이다. setState 안에 객체 형식으로 값을 넣어줘서 해당 값을 변경해줘야 실제로 리액트가 그 값을 변경시켜준다.

bind

let obj = { name: "morello" };

function bindTest() {
    console.log(this.name);
}

bindTest();    //결과는 당연히 undefined
const bindTest2 = bindTest().bind(obj);
//bind() 함수를 통해서 매개변수로 객체를 넣어주면
//그 객체가 넘겨받은 함수 내에서 this로 접근이 가능하게 된다.

bindTest2();    //결과: morello

bind() 함수를 통해서 함수 안에서 this를 이용해서 원하는 객체에 접근할 수 있도록 해 줄 수 있다.

컴포넌트 이벤트 만들기

//class App
...
    return (
      <div className="App">
      //onChangePage props를 함수형태로 보내중
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function () {
            this.setState({
              mode: "welcome",
            });
          }.bind(this)}
        ></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
...

//class Subject
class Subject extends Component {
  render() {
    return (
      <header>
        <h1>
          <a
            href="/"
            //onClick 시에 이벤트를 발생시키는데 이 때
            //this.props.로 접근하여 onChangePage 함수를 실행시킨다.
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}
          >
            {this.props.title}
          </a>
        </h1>
        {this.props.sub}
      </header>
    );
  }
}

<a
    onClick={function (e) {
    e.preventDefault();
    this.props.onChangePage(e.target.dataset.id);
    }.bind(this)}
    href={"/content" + data[i].id}
    data-id={data[i].id}
></a>

위 코드 스니펫에서 data-### 이런 식으로 속성값을 정의해서 넘겨줄 수가 있다. 그렇게 했을 때 예를 들어서 data-id 라고 해놓고 위와 같이 어떤 객체의 미리 정의해놓은 id 값을 넣어주면 그 값이 e.target.dataset 이라는 곳에 ### 즉, 위 예시에서는 id 라는 이름으로 값이 저장돼있다. 그 값을 활용해서 원하는 데이터를 dataset에 담아서 매개변수로 이동시킬 수 있다.