안녕하세요

playListItems 예시 /** * @param {Array} channelIdArray * @returns */ exports.getAllPlaylistItems = async (playlistId) => { const apiKey = process.env.REACT_APP_YOUTUBE_API_KEY; let nextPageToken = null; let videos = []; try { do { const params = { key: apiKey, part: ["snippet"].join(","), playlistId, maxResults: 50, pageToken: nextPageToken, }; const response = await axios.get("https://youtube.goo..

wrapper로 여러개의 a를 감싸서 버블링 막기 a 태그를 반복 사용하는 경우 해당 요소들을 감싸는 links-wrapper를 만들고, links-wrapper에 onClick={()=> event.stopPropagation()} 이벤트를 추가하여 모든 하위 a 태그에 영향을 미칠 수 있습니다. handleLinkClick(e, `https://www.youtube.com/watch?v=${videoId}`)}> e.stopPropagation()}> {title} {channelTitle} => a를 감싸고 있는 body div를 만들고 onClick 이벤트를 추가하여 하위 a 태그에 stopPropagation() 함수를 적용했습니다.

클릭하면 변경할 옵션을 filterOption state에 저장합니다. const [filterOption, setFilterOption] = useState(""); const handleFilterOptionChange = (option) => { setFilterOption(option); }; // ... handleFilterOptionChange("")}>전체 handleFilterOptionChange("option1")}>option1 handleFilterOptionChange("option2")}>option2 옵션이 변경되면 렌더링할 리스트를 filter 기능을 이용해 구현합니다. const filteredVideos = uploadedVideos.filter((video) => { ..

만약 함수가 매우 간단하고 저비용이라면, useMemo를 사용하는 것은 성능 향상에 별다른 이점을 가져다주지 않을 수 있습니다. 불필요한 오버헤드를 추가하는 것이 오히려 시스템의 성능을 저하시킬 수 있습니다. 무조건 최소화 할 필요는 없습니다. 함수가 동일한 매개 변수로 여러 번 호출되면, 결과를 캐시하려는 목적으로 useMemo 훅을 사용할 수 있습니다. useMemo 훅은 특정 입력에 대한 메모이제이션된 값을 반환하는 메모이제이션 훅입니다. 따라서 useMemo를 사용하여 이전 호출의 결과를 기억하면, 같은 입력에 대해 다시 계산할 필요가 없습니다. const getLowestPrice = useMemo( () => (List: ListObject[]): number => { const priceAr..