[React] State, Event

상품을 조작하는데에는 사용자의 입장과 제작자의 입장이 다르다.
사용자의 입장에서는 버튼이나 터치같이 외부에서 내부로 입력을 해주는것이다(props)

제작자의 입장에서는 내부적인 기능의 구현을 위해서 다양한 상황에 따른 내부적인 메카니즘은 만든다.(state)

정리하자면 props는 컴포넌트를 사용자가 사용하는 입장에서 중요한것이고
state는 그 props값에 따라서 내부의 구현에 필요한 데이터 라고 할수 있다.

아래 코드를 보면 이라는 컴포넌트를 html파일에 렌더링하면서 웹에 자료들이 나오는데
외부에서 봤을대는 App실행만 보이지 내부적으로 state가 어떤상태진지, state가 어떤 내용들이 있는지는 확인할 수가 없다.
컴포넌트에서 자료는 아래로만 흐르고 그 방식은 상위컴포넌트의 state값을 하위 컴포넌트의 props값으로 넣어주면서 가능하다.

class App extends Component {
  constructor(props){ 
    // constructor는 컴포넌트가 생기자마자 내부값들을 초기화시켜주는 역할이다.
    super(props);
    this.state = {
      subject:{title:"WEB", sub:'world wide Web!'}
  render(){
    return (
    <div className="App">
	<Subject title="WEB" sub="world wide web!"></Subject>
    <Subject 
      title={this.state.subject.title} // 위 subject와 같은결과가 나온다. 
      sub={this.state.subject.sub}></Subject>
    <Content />
        //a 태그를 클릭했을때 함수를 호출한다.
    <a onClick={function(){ alert('hi')}></a>  
        //a태그를 클릭하면 호출함수가 실행되고 창이 재실행되는데 이건 a태그의 속성때문이다.
        //이걸 없애려면 호출되는 함수를 function(e){console.log(e)}로 e에 들어오는 
        //이벤트 함수를 확인한뒤, 기본속성을 없애는 .preventDefault(); 메소드를 사용하면
        //a태그의 기본속성인 링크부르고 '창새로고침' 속성을 방지할 수 있다.
    <a onClick={
                function(e){e.preventDefault();}
    ></a>
    //이벤트에서 state변경하기
    <a onClick={
                function(){}.bind(this)
        // 클릭으로 호출되는 함수는 this가 undefined인 상태다. 여기 컴포넌트에 묶어주자.
                this.setState({mode : 'welcome'}).bind(this);
    	//state를 변경하려면 반드시 setState메소드를 사용해야 한다.
    ></a>
    </div>
      );
  }
}

class Subject extends Component{
  render(){
    return ( 
    <header>
      <h1> { this.props.title } </h1>
      <h1> { 컴포넌트안에 중괄호를 사용하면 } </h1>
      <h1> { prop으로 넘어온값에 접근가능 } </h1>
      {this.props.sub}
    </header>
      );
  }
}