11. Prop(속성)으로 컴포넌트 재사용

• 프로젝트 링크

• Prop(속성)으로 컴포넌트 재사용

  import reactImg from './assets/react-core-concepts.png';
  import componentsImg from './assets/components.png';
  
  const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
  
  function CoreConcepts(props) {
    return (
      <li>
        <img src={props.image} alt={props.title}/>
        <h3>{props.title}</h3>
        <p>{props.description}</p>
      </li>
    );
  } 
  
  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>
    );
  }
  
  function App() {
    return (
      <div>
        <Header/>
        <main>
          <section id="core-concepts">
            <h2>Time to get started!</h2>
            <ul>
              <CoreConcepts 
                title="Components" 
                description="The core UI building block."
                image={componentsImg} 
              />
              <CoreConcepts/>
              <CoreConcepts/>
            </ul>
          </section>
        </main>
      </div>
    )
  }
  
  export default App;