[React Study] 생활코딩 React - 16. 이벤트 state props 그리고 render 함수 ~ 16.5. 이벤트 setState 함수 이해하기

 

React - 16.1 이벤트 state props 그리고 render 함수

- 목표 : WEB에 링크를 걸고 링크를 클릭하면 welcome에 해당되는 메시지가 나오게 할 것

- 클릭한 것에 해당되는 content 출력되게 함

 

- render() 함수 : 어떤 함수가 변경되면 같이 바뀜

import { Component } from 'react';
import TOC from './component/TOC';
import Content from './component/Content';
import Subject from './component/Subject';
import './App.css';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      mode: 'welcome',
      subject:{title: 'WEB', sub: 'World Wide Web!'},
      welcome:{title: 'Welcome', desc: 'Hello React!!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is for information'},
        {id:2, title:'CSS', desc:'HTML is for design'},
        {id:3, title:'JavaScript', desc:'HTML is for interactive'}
      ]
    }
  }

  render() {
    console.log('App 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 = "HTML" desc = {_desc}></Content>
      </div>
    );
  }
}

export default App;

- mode를 welcome으로 해 놓고 render 함수에 mode가 welcome일 경우 welcome.state와 welcome.desc를 호출하게 만들었음

- read일 경우에는 content의 첫번째 항목을 호출하게 만듬

 

<header>
            <h1><a href ="/">{this.props.title}</a></h1>
            {this.props.sub}
        </header>

- subject.js에 링크 태그 추가

 

- 개발자 도구로 보았을 때 mode가 welcome이면 Hello React가 뜸, read일 땐 다른 자막이 뜸

 

React - 16.2 이벤트 실시

<div className="App">
        {/*<Subject 
        title = {this.state.subject.title} 
        sub = {this.state.subject.sub}>
        </Subject>*/}
        <header>
            <h1><a href ="/" onClick={function(){
              alert('hi');
            }}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
        </header>

- App.java 수정

- Subject 태그를 주석처리하고 Subject.java에서 헤더 태그를 그대로 가져와서 onClick 속성 추가

 

- 이렇게 WEB을 클릭하면 창이 뜨지만 확인을 누르면 페이지가 리로드

 

<header>
            <h1><a href ="/" onClick={function(e){
              console.log(e);
              e.preventDefault();
              alert('hi');
            }}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
        </header>

- preventDefault()를 추가해 페이지가 리로드되지 않게 함

 

React - 16.3 이벤트에서 state 변경하기

- WEB을 클릭했을 때 App이라고 하는 컴포넌트의 모드값을 welcome으로 바꾸고 싶음

 

        <header>
            <h1><a href ="/" onClick={function(e){
              console.log(e);
              e.preventDefault();
              this.state.mode = 'welcome';
              alert('hi');
            }}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
        </header>

- 단순히 this.state.mode의 값을 바꾸면 에러

 

this.state.mode = 'welcome';

1. 이벤트가 호출되었을 때 실행되는 함수 안에서는 this의 값이 component 자기 자신을 가리키지 않고 아무 값도 아님

2. 리액트가 state의 값이 바뀌는 것을 모름

 

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

해결책

1. bind.this를 추가해 저 함수 바로 뒤에 this를 가리키게 함

2. setState() 추가

 

React - 16.4. 이벤트 bind 함수 이해하기

- render 함수 안에서 this는 render 함수가 붙어있는 component 자체를 가리키는데 이벤트 호출 함수에서는 this가 아무 값도 가지지 않음

- bind 함수는 새로운 함수를 복사해주는 역할을 함

 

React - 16.5. 이벤트 setState 함수 이해하기

this.state.mode = 'welcome';

- 리액트 입장에서는 위와 같은 코드를 작성하면 값이 바뀌었는지 인식하지 못함

- 함수가 호출되어 많은 일을 하도록 만들어주는 것이 setState 함수임

- state 값이 변경되면 setState 함수를 써주어야 함

- constructor에서는 편하게 state를 변경해주어도 상관음