[React] props, state, bind, 이벤트

props

 - properties

 - 상위 컴포넌트가 하위 컴포넌트에 값을 넘길 때 사용

 - 컴포넌트의 사용자에게 중요한 정보

 

state

 - props에 따라서 컴포넌트를 실제로 구현

 

React에서는 props나 state의 값이 바뀌면, 해당 props나 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출된다. 그리고 render 함수가 다시 호출됨에 따라서 render 함수 아래의 하위 컴포넌트들도 다시 호출된다. 즉, props나 state가 바뀌면 화면이 다시 그려진다.

 

render 함수: 어떤 html을 그릴 것인지 결정

 

https://maxkim-j.github.io/posts/react-component-this

React 컴포넌트와 this

render 함수 안에서 this는 render 함수가 속해있는 컴포넌트 자체를 가리킨다. 그러나 onClick 이벤트의 인자로 this를 붙인 메서드를 그대로 넘기면 에러가 발생한다. 이렇게 this 값이 없을 때 강제로 this를 주입하려면, bind 함수를 사용한다.

 

var obj = {name: 'Regulus'}
function bindTest(){
    console.log(this.name);
}
bindTest();	//undefined

var bindTest2 = bindTest.bind(obj);	//bind(obj): bindTest 함수의 this를 obj로 만든다.
bindTest2();	//Regulus

 

//App.js
import React, {Component} from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import './App.css';

class App extends Component{
  constructor(props){ //render 함수보다 먼저 실행되면서 컴포넌트를 초기화시켜주고 싶은 코드를 constructor 안에 작성한다.
    super(props);
    this.state = {  //App 컴포넌트가 생성될 때 가장 먼저 실행되는 construct 함수에서는 state를 직접 수정할 수 있다.
      mode:"read",
      Subject:{title:'WEB', sub:"World Wide Web!"},
      welcome:{title:"Welcome", desc:"Hello, React!"},
      Content:[
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JS', desc:"JS is for interfactive"}
      ]
    }
  }

  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.Content[0].title;
      _desc = this.state.Content[0].desc;
    }

    return(
      <div className = "App">
      {/*<Subject
          title={this.state.Subject.title}
          sub={this.state.Subject.sub}>
      </Subject>*/}
        <header>
          <h1><a href="/" onClick={function(e){ //e: 이벤트 설치
            e.preventDefault(); //a 태그의 기본적인 동작 방법을 금지시킨다.
            //this.state.mode = 'welcome';
            //하지만 이미 컴포넌트 생성이 끝난 다음에 동적으로 state값을 바꿀 때는, state는 직접 변경하면 안 되고 함수의 형태(setState)로 변경해야 한다.
            //위와 같이 state를 바꾸면, state.mode의 값은 실제로 바뀌었지만 그것을 react가 모른다.
            this.setState({
              mode:'welcome' 
            })
          }.bind(this)}>{this.state.Subject.title}</a></h1> {/*bind(this): 이벤트를 설치할 때 this를 찾을 수 없어서 에러가 발생하면, 함수가 끝난 직후에 사용한다. 그러면 함수 안에서는 this는 우리의 컴포넌트가 된다.*/}
          {this.props.sub}
        </header> 
        <TOC data={this.state.Content}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}
export default App;

//Subject.js
import React, {Component} from 'react';

class Subject extends Component{
    render(){
      return(
        <header>
          <h1><a href="/">{this.props.title}</a></h1>	{/*WEB에 링크 달기*/}
          {this.props.sub}
        </header>
      );
    }
  }

  export default Subject;   //외부에서 사용할 수 있게 허용