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

https://codemate.kr/@Qcell/input-%ED%83%9C%EA%B7%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-ipQ53Trvdq

input 태그 상태 관리 by Qcell | 코드메이트

input 태그 상태 관리

이번 시간에는 input 태그 상태 관리를 통해 홈 탭에서 console.log로 입력한 데이터를 출력하는 통신을 구현했습니다 :)

 

그 전에 전시간까지 구현했던 탐색 페이지에 이어서, 홈 탭에서도 데이터를 받아와 구현하는 HomeCard와 HomeFilter 컴포넌트를 구현하였습니다.

 

HomeCard.js

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


function HomeCard(data, index) {
  return (
    <a
      href={`https://www.youtube.com/watch?v=${data.id}`}
      key={`home-card-${index}`}
      className={styles.card}
    >
      <img
        className={styles.thumbnail}
        src={data.thumbnail}
        alt={`${data.title}의 썸네일`}
      />
      <div className={styles.info}>
        <a href={`https://www.youtube.com/channel/${data.channelId}`}>
          <img
            className={styles.channelImg}
            src={data.channelThumbnail}
            alt={`${data.channelTitle} 프로필 사진`}
          />
        </a>


        <div>
          <div className={styles.title}> {data.title}</div>
          <div className={styles.uploader}>{data.channelTitle}</div>
          <div className={styles.flex}>
            <div className={styles.view}>{data.viewCount}</div>
            <div className={styles.date}>{data.date}</div>
          </div>
        </div>
      </div>
    </a>
  );
}


export default HomeCard;

HomeFilter.js

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


function HomeFilter({ filter, text, onClickFilter }) {
  return (
    <button
      className={filter === text ? styles.black : styles.gray}
      onClick={onClickFilter}
    >
      {text}
    </button>
  );
}


export default HomeFilter;

 

 

그 뒤에, Home 컴포넌트에서 데이터 통신을 하기 위해 onClick 메소드와 event를 prop로 받는 onChange 메소드를 구현하여 input 태그의 입력값을 console.log로 출력했습니다 :D

 

Home.js

import styles from './Home.module.css';
import Layout from '../components/shared/Layout';
import youtubeData from '../data/youtubeData.json';
import HomeFilter from '../components/home/HomeFilter';
import HomeCard from '../components/home/HomeCard';
import { useState } from 'react';


const target = ['전체', 'Music', 'Entertainment', 'Comedy'];


function Home() {
  const [filter, setFilter] = useState('전체');


  function mapFunc(data, index) {
    return (
      <HomeFilter
        filter={filter}
        text={data}
        onClickFilter={function () {
          setFilter(data);
        }}
        key={`home-filter-${index}`}
      />
    );
  }


  function filterFunc(data) {
    if (filter === '전체' || data.category === filter) return true;
    return false;
  }
  return (
    <Layout activeMenu="home">
      <div className={styles.header}>{target.map(mapFunc)}</div>
      <div className={styles.container}>
        <div className={styles.grid}>
          {youtubeData['data'].filter(filterFunc).map(HomeCard)}
        </div>
      </div>
    </Layout>
  );
}


export default Home;