React Component function 별 분리

Apps.js 

function App(){} 사용

import logo from './logo.svg';
import './App.css';
import React, {Component} from 'react';
import MySubject from './MySubject';
import MyTopic from './MyTopic';
import MyContent from './MyContent';

function App() {
  return (
    <div className="App">
      <MySubject></MySubject>
      <MyTopic></MyTopic>
      <MyContent></MyContent>
    </div>
  );
}

// class App extends Component{
//   render(){
//       return (
//     <div className="App">
//       <MySubject/>
//       <MyTopic/>
//       <MyContent/>
//     </div>
//   );
//   }
// }

export default App;

MyCotent.js

import React, {Component} from 'react';

// class MyContent extends Component{
//     render(){
//         return(
//           <article>
//           <h2>HTML</h2>
//           HTML is HyperText Markup Language.
//         </article>
//         );
//       }
//   }

  function MyContent() {
    return(
      <article>
      <h2>HTML</h2>
      HTML is HyperText Markup Language.
    </article>
    );
  }

export default MyContent;

MySubject.js

import React, {Component} from 'react';

// class MySubject extends Component{
//     render(){
//     return (
//       <header>
//           <h1>WEB</h1>
//           world wide web
//       </header>
//     );
//     }
//   }

  function MySubject() {
    return (
            <header>
                <h1>WEB</h1>
                world wide web
            </header>
          );
  }

export default MySubject;

MyTopic.js

import React, {Component} from 'react';

// class MyTopic extends Component{
//     render(){
//         return(
//           <nav>
//           <ul>
//               <li><a href="1.html">HTML</a></li>
//               <li><a href="2.html">CSS</a></li>
//               <li><a href="3.html">javascript</a></li>
//           </ul>
//       </nav>
//         );
//       }
//   }

  function MyTopic() {
    return(
                <nav>
                <ul>
                    <li><a href="1.html">HTML</a></li>
                    <li><a href="2.html">CSS</a></li>
                    <li><a href="3.html">javascript</a></li>
                </ul>
            </nav>
          );
  }

export default MyTopic;