[생활코딩] 3# 리액트 공부

바인드

엮는다 묶어준다는 뜻

바인드를 쓸때 render 라는 함수가 호출될때

this 는 컴포넌트 자신을 가리킨다.

  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>
      <Subject title="React" sub="For UI"></Subject> */}
        <header>
            <h1><a href="/" onClick ={function (e) {
              e.preventDefault();
              // this.state.mode = 'welcome'
              this.setState({
                mode: 'welcome'
              });
            }.bind(this)}> {this.state.subject.title} </a></h1>
            {this.state.subject.sub}
        </header>
      <TOC data={this.state.contents}></TOC>
      <Content title={_title} desc={_desc}></Content>
    </div>
  );
  }
  

this 값이 없을때 값을 주입하는 방법

var obj = {name : 'name'}
funtion bindTest(){
    console.log(this.name)
}

을 하면 undefined 가뜬다

이거를 쓰고 싶다면

var obj = {name : 'name'}
funtion bindTest(){
    console.log(this.name)
}
var bindTest2 = bindTest.bind(obj);

와 같이 바인드로 obj 를 잡아주게 된다면 디스의 값의 오브젝트가 되기 때문이다.

그렇기에 상단 render() 의

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

중의 bind 함수를 써서 onclick 함수에 this 객체를 넣어준 것이다.

set state()

생성자가 아닌 동적으로 state 를 지정해줄때는

  this.state.mode = 'welcome'
  

이런식 으로 state 를 설정해주면 절대 안된다.

따라서

              this.setState({
                mode: 'welcome'
              });
              

와 같이 해줘야 한다.

이렇게하지 않았을 경우 react가 모른다.

따라서 이렇게 한다면 render() 가 호출이 되지 않는다.

항상 state 값이 바뀐다면 setstate 를써야한다 단! construct 에서는 편하게 써준다.

이벤트

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

이 subject 라고 하는 컴포넌트에 이벤트를 달려고 하면

  <Subject title={this.state.subject.title} 
    sub={this.state.subject.sub}
    onChangePage={function(){
      alert("hh1h1h1h1");
    }.bind(this)}
    ></Subject>
    

이렇게 onChange 하고 하는 변수로 props 에 전달해준다

그리고 subject 컴포넌트에서

        <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={function(){
      this.setState({mode:"welcome"});//변경
      //alert("hh1h1h1h1");
    }.bind(this)}
    ></Subject>
    

setstate 를 넣어준다.