mode를 직접 수정해서 밖누느 것이 아닌 우리 애플리케이션의 역동적으로 만들어 주는 기술인 이벤트를 살펴보자.

props state 이벤트들이 서로 상호 작용하면서 애플리케이션의 역동성을 만들기 때문에 이것들을 생각해 볼 필요가 있다.

이전까지 만든 리액트 앱에 HERE라는 제목에 링크를 연결하고,
그 링크를 클릭하면 "welcom"에 해당되는 메시지가 나오게 해보자.
그 후에 목차에 있는 것들응 클릭하면 클릭한 것에 해당되는 Arti가 본문 영역에 출력되게 해보자.

헤딩부분 제목을 클릭이밴트가 필요함으로 Subject컴포넌트 h1안에 링크를 추가한다.

• Subject컴포넌트

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

mode

우선 페이지가 welcome 페이지인지 또는 read 페이지인지를 구분하기 위해서 state에 mode라는 값을 추가한다.

• App > this.state 구간

mode : 'welcome',
welcome : {title : 'welcome', desc : 'hello, React!!'},

위 코드를 추가해 모드의 기본 값은 welcome으로 하고, mode가 welcome일 때 Arti 영역에 표시할 텍스트를 지정했다.
리엑트에서는 props의 값이나 state값이 바뀌면 해당 컴포넌트의 render 함수가 호출 되도록 약속되어 있다.
또한 render함수가 다시 호출 됨에 따라서 render 함수 하위에 있는 컴포넌트들의 render 함수도 호출되게 된다.
render함수는 어떤 HTML을 그릴 것인가를 결정하기 때문에 화면이 다시 뿌려지게 된다.

이를 이용하여 mode의 값에 따라 컴포넌트의 rendering 결과가 달라지게 render 함수에 조건문을 사용해 보자.

• 조건문을 통해 this.state.mode의 값이 welcome일 경우과 read의 경우를 나누어 작성해보자
• 그리고 <Arti>컴포넌트의 텍스트로 하드코딩 되어 있는 부분도 _title, _desc로 바꾸면 welcome이 화면에 표시된다.
• App.js

render() {
  // 렌더 실행 시 우선으로 
  // title과 desc 값 설정
  var _title, _desc = null;
  // 만약 state의 모드가 welcome과 일치시
  if (this.state.mode === 'welcome') {
    // title을 state의 wecome안에 title값으로
    _title = this.state.welcome.title;
    // desc를 state의 wecome안에 desc값으로
    _desc = this.state.welcome.desc;
  } else if (this.state.mode === 'read') { //혹은 read와 완전히 일치할 경우
    // title과 desc를 state내 contents안의 속성값을 따른다.
    _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>
      <Navi data={this.state.contents}></Navi>
      <Arti title={_title} sub={_desc}></Arti>
    </div>
  );
}

결과 화면

state.mode값이 welcome이기 때문에 render()함수가 호출될 때 if(this.state.mode === 'welcome') 구문이 실행된 결과다,

mode를 read로 바뀌게 되면 else if 구문이 실행되면서 바뀐 결과가 state.contents가 출력된다.

동적으로 App 컴포넌트의 mode 값이 바뀌면서 APP 컴포넌트의 render()가 다시 실행된다.

props와 state값이 바뀌면 render가 호출되는 것을 보여드리기 위해서 각 컴포넌트에 console.log를 출력해보자.

컴포넌트 App Subject Navi Arti 안에 render함수 내에
console.log('___ Render!'); 를 추가하자.
입력했다면 새로고침을 해서 개발자모드를 확인하자.

결과 화면

App Render!
Subject.js:4 Subject Render!
Navi.js:5 Navi Render!
Arti.js:4 Arti render!

App컴포넌트의 render()가 먼저 호출되고 Subject, Navi, Arti가 차례로 호출된느 것을 볼 수 있다.

이번엔 브라우저에서 state의 mode값을 read로 바꾸면 어떻게 될까?
read로 수정해보자.

• state.mode : "read"로 수정후 엔터
  

if 구문이 실행되면서 else if로 처리되면서 props의 값이 바뀌고 바뀐 props를 기반으로 하여 render함수가 다시 호출된다.

• Arti 컴포넌트

import React, { Component } from 'react';
class Arti extends Component {
  render() {
    console.log('Arti render!');
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.title}
      </article>
    );
  }
}
export default Arti;

Arti컴포넌트의 {this.props.title}, {this.props.desc}에 들어가는 값들이 달라지면서 화면이 갱신되게 된다.

즉, read를 welcome 으로 바꾸면 화면이 변경되고 console 탭을 통해 앱 컴퍼넌트 아래에 있는 모든 하위 컴포넌트들이 다시 렌더링 되는 것을 볼 수 있다.