[React] event

애플리케이션을 역동적으로 만들어줄 기술인 event를 살펴볼 것이다.

props, state, event 이 세 개가 상호작용하면서 웹 페이지를 역동적으로 만든다.

 

 

링크에 이벤트를 설치해서 클릭하면 그에 따라서 App 컴포넌트의 state가 바뀌고

바뀐 state가 이 content 컴포넌트의 props 값으로 전달되면서 동적으로 애플리케이션을 바꾼다.

 

현재 우리가 보고있는 페이지의 상태를 구분하기 위해서 state에 mode라는 값을 주었다.

기본값으로 welcome을 주었고 welcome 모드일 때 content 영역에 표시할 텍스트도 지정해주었다.

리액트에서는 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출된다.

다시 호출되면서 render 함수 하위의 컴포넌트들도 각자 가지고 있는 render함수도 모두 다시 호출된다.

=> 화면이 다시 그려지는 것

즉, render 함수가 하는 일은 어떤 html을 그릴 것인가. 를 결정하는 함수이다. 

 

리액트에서는 props 값이나 state 값이 바뀌면 해당되는 컴포넌트의 render 함수가 호출되도록 약속되어있다.

 

 

이 모드 값에 따라서 만들어지는 컴포넌트(만들어지는 rendering 결과)가 달라지도록 조건문을 사용했다.

 

 

리액트는 규칙이 있다.

지금 짜고있는 코드는 유사html이다.

onclick이 아니라 onClick을 써주어야하고 중괄호로 실행될 코드를 묶어주어야한다.

테스트로 alert창을 띄워보았는데 alert 창 확인을 눌러주면 페이지가 reload 되어버린다.

리액트의 reload 하지 않고도 역동적인 사이트를 만들 수 있다는 장점이 없어진다.

 

a태그는 클릭했을 떄 href가 가리키는 곳으로 이동한다는 기본적인 동작이 있는데,

이 기본동작을 못하게 하고싶은 것!!

 

어떻게 하냐?

함수가 실행될 때 리액트는 함수의 첫번째 파라미터 값으로 이벤트라는 객체를 주입해주기로 약속되어있다.

console.log로 확인해보았다.

debugger; 라는 코드는 크롬 개발자 도구를 쓸 때, 크롬 개발자 도구를 켜놓으면 브라우저가 debugger라고 되어있는 부분에서 실행을 멈추고 sources라는 페이지로 이동해서 우리가 여러 정보를 보기 쉽게 해준다.

 

debugger에서 멈춘 것을 볼 수 있다.

이 때 호출된 함수의 첫 번쨰 인자로 e를 줬는데

e는 우리가 핸들링할 수 있게 우리에게 주입되는 정보이다.

html 태그의 기본동작을 못하게 막는 방법이 아래 코드이다.

e.preventDefault();

 

render() 함수

 

 

 

 

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



// 컴포넌트를 만드는 코드 (템플릿)
// 리액트의 Component라고 하는 클래스를 상속하는
// App 이라는 클래스 - render()라는 함수를 가지고 있다.
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 HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is for design ...'},
        {id:3, title:'JavaSript', desc:'JavaSript is ...'}
      ]
    }
  }
  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> */}
        <header>
          <h1><a href="/" onClick={function(e){
            //alert('hi');
            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>  
    );
  }
  
}

export default App;