Monsters-Rolodex 5 | Component | App.css

List 따로 컴포넌트로 빼기

 

새 폴더와 파일 만들기 

 

컴포넌트는 재사용 할 수 있기 때문에 따로 폴더를 만들어 관리한다. 

components 폴더 안

ㄴ card-list 폴더 

ㄴㅡ card-list.component.jsx 파일

ㄴ search-box 폴더 

 

 

 

card-list.component.jsx 파일 기본 뼈대 만들기 

 

 

 

App.js에서 호출하기 

 

 

 

몬스터 이름들을 일단 커멘트 아웃 시키고 

대신 <CardList /> 태그를 넣어준다. 

 

 

 

잘 바뀐 것을 알 수 있다.

 

 

import { Component } from 'react';

class CardList extends Component {

render() {

return (

<div>Hello</div>

)

}

}

export default CardList;

 

---

App.css

body {

margin: 0;

padding: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background: linear-gradient(to left,

rgb(205, 217, 249) 0%,

rgb(216, 248, 248) 100%);

text-align: center;

}