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

#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) => ( //뉴스의 아이콘을 구성하는 부분 //뉴스의 제목과 내용을 띄워주는 부분 {heading} {subtitle} ); return ( LinkedIn News //커스텀 함수를 이용해 반복되는 부분을 줄여준다 {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")} ) } export default Widgets;

from http://freedman.tistory.com/54 by ccl(A) rewrite - 2021-05-31 18:00:20