리스트 컴포넌트 구현#39
Conversation
Summary of ChangesHello @jungwon123, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 할 일 목록에 사용될 재사용 가능한 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| useEffect(() => { | ||
| const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`); | ||
| const handleChange = () => setIsMobile(mql.matches); | ||
|
|
||
| handleChange(); | ||
| mql.addEventListener('change', handleChange); | ||
| return () => mql.removeEventListener('change', handleChange); | ||
| }, []); |
There was a problem hiding this comment.
각 TaskListItem 컴포넌트 인스턴스마다 window.matchMedia를 사용하여 미디어 쿼리 리스너를 등록하고 있습니다. 만약 페이지에 많은 수의 TaskListItem이 렌더링된다면, 다수의 이벤트 리스너가 생성되어 애플리케이션 성능에 부정적인 영향을 줄 수 있습니다.
이 문제를 해결하기 위해, isMobile 상태를 한 곳에서 관리하고 이를 모든 TaskListItem 컴포넌트가 공유하도록 하는 것이 좋습니다. React Context를 사용하여 이 상태를 제공하는 ViewportProvider를 만드는 것을 권장합니다.
예시:
// context/ViewportProvider.tsx
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
const MOBILE_BREAKPOINT = 375;
const ViewportContext = createContext({ isMobile: false });
export function ViewportProvider({ children }) {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
const handleChange = () => setIsMobile(mql.matches);
handleChange();
mql.addEventListener('change', handleChange);
return () => mql.removeEventListener('change', handleChange);
}, []);
return (
<ViewportContext.Provider value={{ isMobile }}>
{children}
</ViewportContext.Provider>
);
}
export const useViewport = () => useContext(ViewportContext);이렇게 ViewportProvider를 애플리케이션의 상위 레벨(예: layout.tsx)에서 감싸준 뒤, TaskListItem에서는 useViewport 훅을 사용하여 isMobile 값을 가져오면 이벤트 리스너를 하나만 유지하면서 상태를 공유할 수 있습니다.
// TaskListItem.tsx
import { useViewport } from '@/context/ViewportProvider';
// ...
const { isMobile } = useViewport();
const iconSize = isMobile ? 10 : 12;
// ...이러한 리팩토링은 성능을 크게 개선하고 코드의 재사용성을 높일 것입니다.
4 participants
Summary
리스트 컴포넌트 구현입니다.
Issue
#38