13. 컴포넌트 분리 저장

• 프로젝트 링크

• 컴포넌트 분리 저장

  src/components/Header.tsx

  import reactImg from '../assets/react-core-concepts.png';
  
  const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
  
  function genRandomInt(max: number): number {
    return Math.floor(Math.random() * (max + 1))
  }
  
  function Header() {
    const description = reactDescriptions[genRandomInt(reactDescriptions.length - 1)]
    return (
      <header>
        <img src={reactImg} alt="React logo" />
        <h1>React Essentials</h1>
        <p>
          {description}
        </p>
      </header>
    );
  }
  
  export default Header;
  

  src/components/CoreConcepts.tsx

  function CoreConcepts({image, title, description}) {
    return (
      <li>
        <img src={image} alt={title}/>
        <h3>{title}</h3>
        <p>{description}</p>
      </li>
    );
  } 
  
  export default CoreConcepts;
  

  src/App.tsx

  import componentsImg from './assets/components.png';
  import { CORE_CONCEPTS } from './data';
  import Header from './components/Header';
  import CoreConcepts from './components/CoreConcepts';
  
  function App() {
    return (
      <div>
        <Header/>
        <main>
          <section id="core-concepts">
            <h2>Time to get started!</h2>
            <ul>
              <CoreConcepts {...CORE_CONCEPTS[0]} />
              <CoreConcepts {...CORE_CONCEPTS[1]} />
              <CoreConcepts {...CORE_CONCEPTS[2]} />
              <CoreConcepts {...CORE_CONCEPTS[3]} />
            </ul>
          </section>
        </main>
      </div>
    )
  }
  
  export default App;