react-performance
React 애플리케이션 성능 최적화
React 앱은 렌더링, 목록, 번들, 이미지, 무거운 연산이 눈에 띄지 않게 늘어나면서 느려질 수 있습니다. 이 스킬은 이러한 비용을 진단하고 줄이는 실용적인 패턴을 제공합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "react-performance" from https://skillstore.io/skills/cjharmath-react-performance.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"react-performance" 사용 중입니다. 필터가 변경될 때 대시보드 목록이 느려집니다.
예상 결과:
이 스킬은 행 가상화, 행 컴포넌트 메모이제이션, 콜백 안정화, 변경 전후 프로파일링을 권장할 것입니다.
"react-performance" 사용 중입니다. 검색창이 키 입력마다 비용이 큰 필터링을 트리거합니다.
예상 결과:
이 스킬은 입력 debouncing, 필터링된 데이터 memoization, React DevTools에서 렌더링 지속 시간 측정을 제안할 것입니다.
"react-performance" 사용 중입니다. 라우트 번들이 첫 로드를 지연시킵니다.
예상 결과:
이 스킬은 무거운 라우트 분할, 이미지 지연 로딩, 변경 후 번들 크기 확인을 제안할 것입니다.
보안 감사
안전The static findings are false positives from Markdown examples for React performance patterns. Dynamic imports, a worker example, and NODE_ENV appear only in documentation snippets. No prompt injection, data exfiltration intent, or malicious workflow was found in SKILL.md.
위험 요인
⚡ 스크립트 포함 (4)
⚙️ 외부 명령어 (27)
🔑 환경 변수 (2)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/cjharmath-react-performance/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/cjharmath-react-performance?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/cjharmath-react-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/cjharmath-react-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
CJHarmath. (2026). react-performance security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-performance/audits/8BibTeX 인용
@techreport{cjharmath-cjharmath-react-performance-2026,
author = {CJHarmath},
title = {react-performance security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cjharmath-react-performance/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-performance security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-performance/audits/8"
identifiers:
- type: other
value: "skillstore:cjharmath-react-performance:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
복잡한 목록 조정
긴 목록에 가상화, 메모이제이션된 행, 안정적인 콜백, 측정된 스크롤 성능이 필요한 시점을 식별합니다.
렌더링 패턴 검토
릴리스 전이나 성능 검토 중에 React 기능에 불필요한 렌더링이 있는지 확인합니다.
상호작용 지연 감소
사용자 동작을 지연시키는 느린 필터, 검색, 대시보드, 라우트를 위한 작은 변경 사항을 계획합니다.
이 프롬프트를 사용해 보세요
이 React 컴포넌트를 검토하고 불필요한 렌더링이 발생할 가능성이 높은 부분을 식별하세요. 가장 작은 변경 사항부터 제안하세요.
이 대규모 목록 뷰를 가상화 계획으로 변환하세요. 항목 크기, 메모이제이션, 접근성 점검을 포함하세요.
이 Zustand selector와 컴포넌트 props를 감사하세요. selector, shallow comparison, memoization 변경 사항을 제안하세요.
이 기능을 위한 우선순위가 지정된 React 성능 계획을 작성하세요. 프로파일링, 번들 분할, worker offloading, 검증 지표를 다루세요.
모범 사례
- 코드를 변경하기 전에 프로파일링하고, 각 최적화 후 동일한 상호작용을 측정하세요.
- props가 안정적이고 렌더링 비용이 의미 있을 때만 메모이제이션을 적용하세요.
- 광범위한 아키텍처 변경을 추가하기 전에 타깃 selector와 가상화된 목록을 우선하세요.
피하기
- 렌더링 비용을 측정하지 않고 모든 값을 메모이제이션하는 것.
- 매 렌더링마다 새 객체나 콜백을 메모이제이션된 자식에 전달하는 것.
- 컴포넌트에 하나의 필드만 필요한데 전체 store를 선택하는 것.