Monsters-Rolodex 10 | Card 탬플릿 만들기

폴더, 파일 만들기 

 

Card 폴더와

cars.component.jsx 와 card.styles.css 파일을 만든다

 

 

파일 서로 연결하기

card-list 에서 Card 연결 

 

card에서 css 연결

 

 

 

jsx 파일 보일러 플레이트 만들기 

 

 

 

card-list에서 card에 해당하는 부분 옮기기 

 

 

 

Card.component.jsx로 옮기기 

Card로 코드를 옮기고 나면 name, email. id로 에러가 뜨는데 destructure를 다시 해줘야 한다. 

 

name, email. id는 this.props.monster로 destructuring 하기 

monster가 없으니 받아 와야함 

 

 

card-list 의 map() 함수 안에 든 monster를 Card로 보내줘야 한다. 

Card 태그 안에 monster를 넣어 보내준다.

 

 

CSS 내용 옮기기 

card-list.style.css에 있는

.card-constainer 을  card.css로 옮긴다. 

 

 

---

card-list.component.jsx

import { Component } from 'react';

import Card from '../card/card.component';

import './card-list.styles.css';

class CardList extends Component {

render() {

const { monsters } = this.props;

return (

<div className='card-list'>

{monsters.map((monster) => {

return (

<Card monster={monster} />

)

})}</div>

)

}

}

export default CardList;

 

card-list.stylse.css

.card-list {

width: 85vw;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-gap: 20px;

}

 

 

card.component.jsx

import { Component } from 'react';

import './card.styles.css';

class Card extends Component {

render() {

const { name, email, id } = this.props.monster;

return (

<div className='card-container' key={id}>

<img

alt={`monster ${name}`}

src={`https://robohash.org/${id}?set=set2&size=180x180`} />

<h2>{name}</h2>

<p>{email}</p>

</div>

)

}

}

export default Card;

 

 

card.styles.css

.card-container {

display: flex;

flex-direction: column;

background-color: #e6e2af;

border: 1px solid grey;

border-radius: 5px;

padding: 25px;

cursor: pointer;

-moz-osx-font-smoothing: grayscale;

backface-visibility: hidden;

transform: translateZ(0);

transition: transform 0.25s ease-out;

}

.card-container:hover {

transform: scale(1.05);

}