컴포넌트 2번 호출되는 문제

console로그를 확인해보니 

각 컴포넌트들이 두번 씩 호출되는데 왜 그런지 알 수 있을까요?

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){
    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 for information"},
        {id : 2, title : "CSS", desc : "CSS is for design"},
        {id : 3, title : "JavaScript", desc : "JavaScript is for interactive"}
      ]
    });
  }
  render() {
    console.log('App.js 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>
          <TOC data={this.state.contents}></TOC>
          <Content title={_title} desc={_desc}></Content>
      </div>      
    );
  }
}
export default App;