mui를 사용해서 간단하게 위 검색창을 만들어 보겠습니다. 저는 위 디자인이 마음에 들어서 해당 코드를 사용했습니다. import Paper from '@mui/material/Paper'; import InputBase from '@mui/material/InputBase'; import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; import MenuIcon from '@mui/icons-material/Menu'; import SearchIcon from '@mui/icons-material/Search'; import DirectionsIcon from '@mui/icons-mater..
오늘은 부모 컴포넌트에서 fetch를 통해 데이터를 받아와서 자식 컴포넌트로 props를 보낼 때 주의해야 할 사항을 알아 보겠습니다. import PropsComponent from "./PropsComponent"; import { useEffect, useState } from "react"; function App() { const [data, setData] = useState("5초 전"); useEffect(() => { setTimeout(() => { setData("5초 후"); }, 5000); }, []); return ( ); } export default App; // 부모 컴포넌트 const PropsComponent = ({ data }) => { return {data}; ..
https://www.npmjs.com/package/react-youtube react-youtube React.js powered YouTube player component. Latest version: 10.1.0, last published: 4 months ago. Start using react-youtube in your project by running `npm i react-youtube`. There are 236 other projects in the npm registry using react-youtube. www.npmjs.com npm install react-youtube 구간 반복 재생을 도와줄 라이브러리를 설치합니다. import React from 'react'; im..
React에는 slick이라는 carousel library가 존재하지만 이미지 사이에 공간을 넣거나 버튼의 위치를 옮기는 등의 커스텀은 어렵습니다. 따라서 library 없이 캐러셀을 만들어 보았습니다. import Carousel from 'components/common/Carousel'; import styled from 'styled-components'; const Main = styled.div``; interface Props { url: string; id: string; } const HomePage = () => { const data: Props[] = [ { url: 'https://img.youtube.com/vi/6Af6b_wyiwI/0.jpg', id: '6Af6b_wyiwI..
