[생활코딩/React] 16. 이벤트

참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

1. 이벤트 state props 그리고 render 함수

---

state 값에 따라 화면을 다르게 출력해보자!

💡리액트는 state 값이 변경되면 render 함수가 다시 호출된다. render는 HTML대로 화면을 다시 그리는 함수라고 생각하면 된다.

//App.js
this.state = {
  mode: 'welcome',
  subject: {title: "WEB3", sub: "world wide web!3"},
  welcome: {title: "Welcome", desc: "Hello, React!!"},
  contents: [
    {id: 1, title: "HTML3", desc: "HTML is for information.3"},
    {id: 2, title: "CSS3", desc: "CSS is for design.3"},
    {id: 3, title: "JavaScript3", desc: "JavaScript is for interactive.3"},
  ]
}

👉🏻state에 mode와 welcome을 추가한다.

//App.js
render () {
var _title, _desc = null;
if(this.state.mode === 'welcome') {
  _title = this.state.welcome.title;
  _desc = this.state.welcome.desc;
} else if (this.state.mode === 'read') {
  _title = this.state.contents[0].title;
  _desc = this.state.contents[0].desc;
}
return (
  <div className="App">
    <Subject 
      title={this.state.subject.title} 
      sub={this.state.subject.sub}>
    </Subject>
    <TOC
      data={this.state.contents}>
    </TOC>
    <Content 
      title={_title} 
      desc={_desc}>
    </Content>
  </div>
);
}

👉🏻render 함수에 if문을 추가한다. mode state의 값이 무엇인지에 따라 다른 내용을 _title과 _desc에 담아 return의 Content props에 넘겨준다.

👉🏻각각 왼쪽은 mode가 'welcome'일 때, 오른쪽은 mode가 'read'일 때이다. Content의 내용이 알맞게 바뀌었다.

 

2.  이벤트 설치

---

mode의 값을 WEB이라는 글자를 클릭했을 때 JS를 이용해 바꿔보자!
Subject내의 a tag를 클릭했을 때 App의 state 값을 변경시킬 것이다.

먼저 tag에 이벤트를 설치해보자!

//App.js
return (
  <div className="App">
    {/* <Subject 
      title={this.state.subject.title} 
      sub={this.state.subject.sub}>
    </Subject> */}
    <header>
      <h1><a href='/' onClick={function(e){
        console.log(e);
        e.preventDefault();
      }}>{this.state.subject.title}</a></h1>
      {this.state.subject.sub}
    </header>
    <TOC
      data={this.state.contents}>
    </TOC>
    <Content 
      title={_title} 
      desc={_desc}>
    </Content>
  </div>
);

👉🏻return 부분에 임시로 Subject.js의 내용을 들고 온다. 

👉🏻JS에는 onclick으로 이벤트를 설치하지만 React에서는 onClick으로 이벤트를 설치한다.

✍🏻preventDefault: 이벤트가 발생한 tag의 기본적인 동작을 막는다. 여기서 a tag는 링크를 이동하는 tag이므로 reload 되는데 이 동작을 막아주는 것이다.

 

3.  이벤트에서 state 변경하기

---

 

state 값을 변경해보자.

//App.js
<header>
  <h1><a href='/' onClick={function(e){
    console.log(e);
    e.preventDefault();
    this.setState({
      mode: 'welcome'
    })
  }.bind(this)}>{this.state.subject.title}</a></h1>
  {this.state.subject.sub}
</header>

✍🏻bind(this): this를 찾지 못해서 발생하는 에러는 이 문구를 쓰면 된다. 그러면 이 함수 안에서 this는 현재 속한 component(App)가 된다.

✍🏻setState: state의 값을 변경해준다.

 

4.  이벤트 bind 함수 이해하기 

---

💡쉽게 말해 해당 컴포넌트를 this로 주입시킨다고 생각하자

 

5.  이벤트 setState 함수 이해하기

---

💡함수로 호출해야 React가 인지할 수 있다.

👉🏻this.state.mode는 Constructor에서 사용하는 것은 괜찮지만 render에서 사용할 때는 React가 인지할 수 없다.

최종 코드