[React.js] Component 사용하기
React.js의 큰 특징 중 하나는 컴포넌트 기반의 동작이다.
위와 같이 fav 변수에 접근할 수도 있다.
1. Component 선언 및 사용법
'Potato.js'
import React from "react"; function Potato(){ return ( <h3>I love Potato</h3> ) } export default Potato; | cs |
컴포넌트란 HTML을 반환하는 함수로 하나의 부품이라고 생각하면 된다.
컴포넌트를 사용하기 위해서는 파일과 같은 이름의 함수를 만들고, HTML요소를 반환(이것이 바로 jsx!) 하도록 한다. 외부에서 이 컴포넌트를 사용하게하기 위해서는 export 시켜줘야 한다.
'index.js'
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') ); | cs |
index.js는 js 파일을 읽고 렌더링한다. App.js를 사용하는 방식을 잘 봐두자. index.js는 하나의 파일만 렌더링 할 수 있으므로 위에서 만든 Potato.js는 여기서 넣을 수 없다. 따라서 App.js에 추가시킨다.
'App.js'
import React from 'react'; import Potato from './Potato'; function App() { return ( <div> <h1>Helloooo</h1> <Potato /> </div> ); } export default App; | cs |
main 파일인 App.js이다. Potato 파일을 import 하여 return 내부에 위 index.js에서 App.js를 import했던 방식과 똑같이 Potato.js를 추가시킨다.
>> 출력 결과
두개의 컴포넌트가 하나의 페이지에 합쳐져 출력된다!
또한 소스코드를 확인해보면 'Helloooo'나 'I love Potato'같은 html 요소는 보이지 않는다.
2. 컴포넌트에 인자 전달하기
function Food({ fav }){ return ( <h1>I love {fav}</h1> ) } function App() { return ( <div> <h1>Helloooo</h1> <Food fav = "pizza"/> <Food fav = "ham"/> </div> ); } | cs |
Food 라는 컴포넌트를 만들어 사용하고 있다. 위와 같은 방식으로 property들을 전달할 수 있다. { fav }는 ES6문법이다.
{ } 를 사용하면 객체 내부의 property에 접근할 수 있게 된다.
function Food(props){ return ( <h1>I love {props.fav} </h1> ) | cs |
위와 같이 fav 변수에 접근할 수도 있다.
3. map 함수를 이용해 컴포넌트를 반복적으로 출력하기
const foodILike = [ { name: "...", image : "..." }, ] | cs |
JSON 형식의 Food정보를 담는 상수를 만든다. image는 구글에서 이미지 주소를 복사해왔다.
function Food({ name, picture }){ return ( <div> <h2>I like {name}</h2> <img src = {picture}/> </div> ) } | cs |
* html 안에 { } 를 써서 자바스크립트를 쓸 수 있다 *
이제 Food 컴포넌트를 foodILike 리스트에 들어있는 만큼 출력하기 위해 map을 사용한다. map은 리스트의 각 요소에 대해 function을 적용시켜 결과를 반환하는 함수다.
function App() { return ( <div> { foodILike.map(dish => <Food name = {dish.name} picture = {dish.image} />)} </div> ); } | cs |
페이지를 확인해보면 리스트에 있던 요소가 차례대로 출력되어있다.
위와 같이 코드를 치고 콘솔창을 열어보면 오류를 확인할 수 있다.
key prop이 없어서 발생하는 오류다. 리액트는 각 요소를 모두 다르게 구분하기 위한 key prop을 필요로 한다. 따라서 foodILike 리스트의 각 요소를 구분할 수 있는 id 값을 추가한다.
{ id:1, name: "hamburger", ... | cs |
그리고 이 prop을 react에게 알려줘야 한다!
<Food key = {dish.id} name = {dish.name} picture = {dish.image} />)} | cs |
No comments: