chryis14
2022.03.23
@chryis14님이 새 포스트를 작성했습니다.
오늘의 문제 : 필터 변경하기(13일차를 공부해야 할 수 있네요)
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 = ['전체', 'BTS', 'LISA', '현아', '아이폰']; 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.title.includes(filter) || data.description.includes(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;
chryis14
2022.03.15
@chryis14님이 새 포스트를 작성했습니다.
오늘의 문제 : 데이터 구조 파악하기
App.js import './App.css'; import youtubeData from './data/youtubeData.json'; function App() {   console.log('youtubeData :',youtubeData);   console.log('영상 아이디 : ', youtubeData['data'][58]['id']);   console.log('채널 아이디 : ', youtubeData['data'][58]['channelId']);   console.log('업로드 날짜 : ', youtubeData['data'][58]['date']);   console.log('영상 제목 : ', youtubeData['data'][58]['title']);   console.log('영상 썸네일 : ', youtubeData['data'][58]['thumbnail']);   console.log('영상 정보 : ', youtubeData['data'][58]['description']);   console.log('채널명 : ', youtubeData['data'][58]['channelTitle']);   console.log('카테고리 : ', youtubeData['data'][58]['category']);   console.log('조회수 : ', youtubeData['data'][58]['viewCount']);   console.log('좋아요수 : ', youtubeData['data'][58]['likeCount']);   console.log('채널 주소 : ', youtubeData['data'][58]['channelUrl']);   console.log('채널 썸네일 : ', youtubeData['data'][58]['channelThumbnail']);   return <div>리액트로 데이터 불러오기</div>; } export default App;
chryis14
2022.03.14
@chryis14님이 새 포스트를 작성했습니다.
오늘의 문제 : 구구단 출력하기
Hello 값을 Props로 받고 Hello값에 맞는 구구단을 출력했습니다 Hello.js function Hello({number}) {     return (         <div>         <p>{number}*1={number*1}</p>         <p>{number}*2={number*2}</p>         <p>{number}*3={number*3}</p>         <p>{number}*4={number*4}</p>         <p>{number}*5={number*5}</p>         <p>{number}*6={number*6}</p>         <p>{number}*7={number*7}</p>         <p>{number}*8={number*8}</p>         <p>{number}*9={number*9}</p>         <p>{number}*10={number*10}</p>         </div>     ); } export default Hello; Bye.js function Bye({text, onClick}) {     return <button onClick={onClick}>{text}</button> } export default Bye; import React,{useState} from 'react'; import Hello from './Hello'; import Bye from './Bye'; App.js function App() {   const [number, setNumber] = useState(0);   function Plus() {     setNumber(number +1);   }   function Minus() {     setNumber(number -1);   }   function Double() {     setNumber(number * 2);   }   return(     <div>     <Hello number={number}/>     <Bye onClick={Plus} text="+1" />     <Bye onClick={Minus} text="-1" />     <Bye onClick={Double} text="*2" />   </div>   ); } export default App;