오늘은 지난시간에 컴포넌트를 생성했던 것에 이어서 컴포넌트를 재사용하는 방법에 대해 살펴봤다.
먼저 지난 번에 어떤 일이 있었느냐!
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같은 것을 많이 대체할 수 있겠다는 생각이든다.