[react] 노마드코더 영화웹서비스 제작 2.1 재사용 가능한 컴포넌트 with JSX + Props

오늘은 지난시간에 컴포넌트를 생성했던 것에 이어서 컴포넌트를 재사용하는 방법에 대해 살펴봤다.
먼저 지난 번에 어떤 일이 있었느냐!

index.js
App.js
Potato.js
이렇게 index와 App을 변형하고, Potato를 생성해서 App.js와 Potato.js에 있던 컴포넌트, App과 Potato를 index.js에서 사용하는 방법에 대해서 알아봤었다.

이번에는 Potato.js를 지우고 App.js 한 파일에 App과 Food라는 두 컴포넌트를 넣어 아주 조금 더 어려운 활용을 해보았다.😃

//App.js
import React from 'react';

function App() {
  return (
  <div>
    <h1>hello!!!</h1>
    <Food name="kimchi"/>
    <Food name="potato"/>
    <Food name="topokki"/>
  </div>);
}

function Food({name}){
  return (
    <h3>I love {name}</h3>
  )
}

export default App;

보면 export되는 App은 이런 형태로 출력된다.

  <div>
    <h1>hello!!!</h1>
    <h3>I love kimchi</h3>
    <h3>I love potato</h3>
    <h3>I love topokki</h3>
  </div>);

function Food(props){
  return (
    <h3>I love {props.name}</h3>
  )
}

이라고 쓸 수도 있지만 위에서 쓴 코드가 더 나이스하다. 우리는 props 내부에서 바로 name을 가져올 수 있다.

또 한편 속성은

function App() {
  return (
  <div>
    <h1>hello!!!</h1>
    <Food
          name="kimchi"
          something="true" //불리언
          flavor={["spicy", "salty", 5, true]} //배열
    />
  </div>);
}

다 가능하다.

---

보면 볼수록 JSX는 참 절묘하다. 함수의 형태로 html을 출력하다니. inner HTML같은 것을 많이 대체할 수 있겠다는 생각이든다.

• JSX는 'JavaScript➡️HTML'
• 컴포넌트는 HTML을 리턴하는 함수이며 셀프클로징 태그처럼 생겼다.
• Props는 컴포넌트에 정보를 주며 Attribute(< ~="">)와 같은 형태이다.
• Props는 인자(argument)에 들어갈 수 있다. 단, {} 중괄호가 필요하다. 하지만 'props' 그자체는 중괄호 필요X