[Mission 1] 리스트 페이지 목데이터로 map 사용하여 구현하기

• 리스트 페이지의 아래 부분을 컴포넌트CoffeCard로 분리해주세요.
  

React Library의 함수 컴포넌트를 통해 쉽게 구현할 수 있는 과정이다.

📲 구현 코드

import React from "react";
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons"; 
// FontAwesome의 Icon을 불러옴

function CoffeeCard(props) {
    return (
        <li><Link to="/Detail"><img src={props.item.imgsrc} alt="커피이미지" /></Link> 
        // 각각 다른 이미지를 위한 props
            <div className="nameandheart">
                <span><Link to="/Detail">{props.item.coffeename}</Link></span>
              //각각 다른 커피의 이름을 위한 props
                <a href="#" className="heart3"><FontAwesomeIcon icon={regularHeart} /></a> //하트 버튼
            </div>
        </li>
    )
}

export default CoffeeCard;

🐳 느낀 점

비교적 쉬운 프로젝트의 1단계이다. 함수 컴포넌트 혹은 클래스 컴포넌트를 통해 페이지 내에서 반복되는 부분을 컴포넌트로 따로 빼내는 과정이다. 이 때까지는 컴포넌트의 장점을 몰랐지만, 프로젝트의 후반 단계로 갈수록 그 장점을 더욱 절실히 느끼게 되었다.