[모각코+] 웹 리액트(React) 1월달과정 12일차

https://codemate.kr/@Qcell/%ED%95%84%ED%84%B0-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0-Mep7u0noJu

필터 변경하기 by Qcell | 코드메이트

이번 시간에서는 map 메소드를 학습했습니다 !

map은 배열과 함수를 인자로 받고, 배열의 요소를 돌면서 전달된 함수를 적용한 새로운 배열을 반환하는 메소드입니다.

컴포넌트의 유일성을 보장하기 위해 key값이 필요하다는 것도 깨달았어요.

그래서 이 map을 활용하여 youtubejson의 데이터를 사용해 보았습니다 !

 

ExploreCard.js

import styles from './ExploreCard.module.css';


function ExploreCard({ data }) {
  return (
    <a href={`https://www.youtube.com/watch?v=${data.id}`}>
      <div className={styles.card}>
        <img
          className={styles.thumbnail}
          src={data.thumbnail}
          alt={`${data.title}의 썸네일`}
        />
        <div className={styles.info}>
          <div className={styles.title}>{data.title}</div>
          <div className={styles.meta}>
            <a
              href={`https://www.youtube.com/channel/${data.channelId}`}
              className={styles.uploader}
            >
              {data.channelTitle}
            </a>
            <div className={styles.view}>{data.viewCount}</div>
            <div className={styles.time}>{data.date}</div>
          </div>
          <div className={styles.desc}>{data.description}</div>
        </div>
      </div>
    </a>
  );
}
export default ExploreCard;

ExploreCard.module.css

a {
    text-decoration: none;
    color: #606060;
  }
  .card {
    display: flex;
    margin-bottom: 16px;
    max-width: 862px;
  }
  .thumbnail { 
    flex: 0 0 246px;
    width: 246px;
    object-fit: fill;
    margin-right: 16px;
  }
  .title {
    color: #030303;
    font-size: 18px;
  }
  .info {
    flex: 1;
    width: 200px;
  }
  .meta {
    display: flex;
    margin-bottom: 8px;
    font-size: 12px;
  }
  .uploader:hover {
    color: #030303;
  }
  .uploader::after,
  .view::after {
    content: '•';
    margin: 0 4px;
  }
  .desc {
    font-size: 12px;
  }
  .title,
  .desc {
    /* 2줄이 넘을 경우 ... 표시 */
    display: -webkit-box;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  @media screen and (max-width: 529px) {
    .info {
      display: none;
    }
  }

 

그리고 Explore.js에 Map을 적용시켰습니다 !

​

오늘의 문제는 이 상황에서 특정 카테고리를 선택하여 해당하는 카테고리 영상만 출력되도록 만드는 것이였는데요!

React 자체만으로도 어려운데 스타일링까지 생각해야 하는게 너무 어렵더라구요.. 그래서 스타일링은 최대한 배제하고 React에만 중점을 두었습니다.

 

Explore.js

import Layout from '../components/shared/Layout';
import ContentsLayout from '../components/shared/ContentsLayout';
import youtubeData from '../data/youtubeData.json';
import ExploreCard from '../components/explore/ExploreCard';
import styles from './Explore.module.css';
import { useState } from 'react';


function Explore() {


  const filterArray = ['전체', 'BTS','NCT','라디오스타'];
  const [filterIndex, setFilter] = useState(0);
  function setUp(data){
    let filterWord = filterArray[filterIndex];
    if(filterWord == '전체'){
      filterWord = '';
    }
    return data.title.includes(filterWord) || data.description.includes(filterWord);
  }
  return (
    <Layout activeMenu="explore">
      <div className={styles.filterArray}>
        {filterArray.map((filter,index) => (
          <button className={filterIndex == index ? styles.selectindex : ''}
            onClick={() => setFilter(index)} key={index}>{filter}</button>
        ))}
      </div>
      <ContentsLayout>
        {youtubeData['data'].map(function (data, index) {
          if(setUp(data))
            return <ExploreCard key={`explore-card-${index}`} data={data} />;
        })}
      </ContentsLayout>
    </Layout>
  );
}


export default Explore;

 

filterArray에 전체에 해당하는 부분을 '' 으로 두어 전체로 검색되게 했더니 검색은 잘 되지만 다시 전체로 치환하는게 어렵더라구요.. 고민하다가 다른분의 코드를 보니 if문 하나만 두면 되는 아주 간단한 문제여서 당황했습니다... 이제 슬슬 형태가 잘 갖추어지는것같아요 !!