#8. 위젯 부분 구현 | Widgets.js

마지막으로 메인화면 오른쪽의 위젯부분을 구현한다

위젯부분은 특별한 로직이 들어가지 않는다. 다만 UI가 반복되기 때문에 이렇게 반복되는 부분을 커스텀함수로 작성한다.

 

import React from 'react'
import './Widgets.css'
import InfoIcon from "@material-ui/icons/Info"
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'


function Widgets() {

	//본문과 내용을 인자로 받는 커스텀 함수
    const newsArticle = (heading, subtitle) => (
        <div className="widgets__article">
        	//뉴스의 아이콘을 구성하는 부분
            <div className="widgets__articleLeft">
                <FiberManualRecordIcon />
            </div>
            
            //뉴스의 제목과 내용을 띄워주는 부분
            <div className="widgets__articleRight">
                <h4>{heading}</h4>
                <p>{subtitle}</p>
            </div>
        </div>
    );

    return (
        <div className="widgets">
            <div className="widgets__header">
                <h2>LinkedIn News</h2>
                <InfoIcon />
            </div>
            
            //커스텀 함수를 이용해 반복되는 부분을 줄여준다
            {newsArticle("React by Chanmin", "This is all by myself")}
            {newsArticle("New Macro-Hedge Fund", "Bridgewater sells bitcoins")}
            {newsArticle("Etherium on Top", "You can sell it at the highest")}
            {newsArticle("Only Using JS", "Fullstack Dev with JavaScript")}
        </div>
    )
}

export default Widgets;