21.08.24 개발일지

if~else문을 사용하지 않고 style 구분 주는 방법 = key, value 값으로 구분한다.

뉴스 카드에서 tag가 들어가는 부분이 있는데, 이 tag는 갯수 제한이 없어서 백엔드에서 데이터가 들어오면 무제한으로 받아들여야 한다.
-> 그럴 경우 key 값을 무제한으로 받을 수 있게 배열로 설정한다.

저번의 newsData 부분을 이렇게 수정하였다.

[
        {
            id: 1,
            type: "tips",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황", "일중시황",],
          },
          {
            id: 2,
            type: "report",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황",],
          },
          {
            id: 3,
            type: "economic",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황", "일중시황", "일중시황"],
          },
          {
            id: 4,
            type: "magazine",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황", "일중시황", "일중시황"],
          },
          {
            id: 5,
            type: "financialMarket",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황", "일중시황", "일중시황"],
          },
          {
            id: 6,
            type: "consulting",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황", "일중시황", "일중시황", "일중시황"],
          },
          {
            id: 7,
            type: "property",
            date: "2021. 01. 01",
            topic: "은행업무Tip",
            title: "은행업무Tip",
            tags: ["일중시황" ],
          },
    ]

그리고, type별로 적용되는 색상이 달라지게 Card.js 컴포넌트에서 color 상수에 값을 지정해준다.

const {id, type, date, topic, title, subtitle} = props;
    const color ={
        tips: 'yellow',
        report: 'blue',
        economic: 'boldpurple',
        magazine: 'green',
        financialMarket: 'emerald',
        consulting: 'sky',
        property: 'gold'
    }

그러고 난 후, return 값에서 각 type에 따라서 색상이 달라지도록 지정해준다.

return(
        <div className={`news__card__inner card-${color[type]} scrap`} onClick={()=>console.log(id)}>
            <p className='news__date'>
                {date}
            </p>
            <p className={`news__topic text-${color[type]}`}>
                {topic}
            </p>
            <p className='news__title'>
                {title}
            </p>
            <p className="news__subtitle">
                {subtitle}
            </p>
        </div>
    )

이런식으로 if~else문을 사용하지 않고도 component에서 달라지는 값에 따라서 style 지정이 가능하다.