12. Props(속성) 대체 문법

• 프로젝트 링크

• Props(속성) 대체 문법

  data.ts

  // data.ts
  import componentsImg from './assets/components.png';
  import propsImg from './assets/config.png';
  import jsxImg from './assets/jsx-ui.png';
  import stateImg from './assets/state-mgmt.png';
  
  export const CORE_CONCEPTS = [
    {
      image: componentsImg,
      title: 'Components',
      description:
        'The core UI building block - compose the user interface by combining multiple components.',
    },
    {
      image: jsxImg,
      title: 'JSX',
      description:
        'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.',
    },
    {
      image: propsImg,
      title: 'Props',
      description:
        'Make components configurable (and therefore reusable) by passing input data to them.',
    },
    {
      image: stateImg,
      title: 'State',
      description:
        'React-managed data which, when changed, causes the component to re-render & the UI to update.',
    },
  ];
  

  App.tsx

  import reactImg from './assets/react-core-concepts.png';
  import componentsImg from './assets/components.png';
  import { CORE_CONCEPTS } from './data';
  
  const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
  
  function CoreConcepts({image, title, description}) {
    return (
      <li>
        <img src={image} alt={title}/>
        <h3>{title}</h3>
        <p>{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 {...CORE_CONCEPTS[0]} />
              <CoreConcepts {...CORE_CONCEPTS[1]} />
              <CoreConcepts {...CORE_CONCEPTS[2]} />
              <CoreConcepts {...CORE_CONCEPTS[3]} />
            </ul>
          </section>
        </main>
      </div>
    )
  }
  
  export default App;