이 스킬과 그 밖의 2,500+개, 채팅 안에서
월 $9 언제든 해지 가능, 또는 연 $59
- 2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
- 다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
- 매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드
AI React 튜터
$19
제품 정보로 건너뛰기
AI React 튜터
어떤 컴포넌트가 다시 렌더링된 이유를 설명하고, 상태를 처음부터 적절한 곳에 배치할 수 있습니다.
$19
이 스킬
한 번 결제
평생 소유
프롬프트 파일 즉시 다운로드
Library 플랜
이 스킬 외 2,500+개를 함께 받으세요
$9/월 또는 연 $59
Library 시작 · $9/월Library 시작
이 스킬, 7일간 무료로 써 보세요무료로 써 보기
- 7일 무료, 카드 없이
- 언제든 해지 가능
- 첫 결제 30일 환불 보장
결제되지 않습니다. 체험 종료 2일 전에 첫 결제에 쓸 수 있는 −30% 코드가 도착합니다.
- 커넥터 하나로 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서 작동
- 모든 스킬, 프롬프트 팩, 에이전트에 체험 기간 동안 AI CRM과 도구까지
- 언제든 해지 가능
이 스킬만 필요하신가요?
파일 1개, 한 번만 결제. 업데이트 없음, 커넥터 없음.
Library 2개월 이용료와 비슷한 가격입니다.
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe 보안 결제
각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.
작동 방식
Ask it something hard.
렌더링이 너무 많이 발생하는데 무엇이 반복되는지 확인할 수 없습니다.
CLAUDE · WITH THIS SKILL
전체 컴포넌트에 대한 요청을 받습니다. 오류가 가리키는 줄에 대한 요청이 아닙니다 -> 어떤 줄에서 setter 함수를 호출하는지, 그리고 그중 렌더링 중에 실행되는 것이 있는지에 대한 질문 -> `onClick={setOpen(true)}`이 버튼에 있다는 답변 -> 함수를 전달하는 것과 함수를 호출하는 것의 차이에 대한 짧은 설명 -> 다른 컴포넌트에서 두 형태를 나란히 보여 주는 예시 -> 이제 차례가 되면 렌더링 시점에 `onClick` prop이 실제로 어떤 값을 받는지 말해 보세요 -> `setOpen`을 호출한 결과를 받는다는 것을 알아냄 -> 개념 이름: 이벤트 핸들러에는 함수가 전달되어야 하며, 그 결과가 전달되면 안 됨 -> 다음 단계: 파일의 모든 핸들러에서 같은 형태가 있는지 확인하세요.
또는 모든 스킬을 AI 안에서.
구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com
// 파일 원본
구매 전에 직접 읽어 보세요.
AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.
이름으로 불러 보세요
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
// 당신의 AI를 움직이는 skill
당신은 소크라테스식 React 튜터이며, 학습자는 이미 JavaScript를 작성할 줄 알기 때문에 어떤 훅보다 먼저 렌더링 모델을 가르칩니다. 컴포넌트가 실행된 이유와 상태가 속해야 할 위치를 설명하도록 활성화되었습니다.
// 구성
이 스킬에 담긴 내용
- 어떤 훅보다 먼저 배워야 할 렌더링 모델
- 아마 이 useEffect는 필요 없을 겁니다. 그리고 그 이유를 보여 줍니다
- 키, 오래된 클로저, 너무 많은 리렌더링을 원인부터 설명
- 메모이제이션은 마지막에, 문제가 측정될 때만
프런트엔드 업무로 전환하는 JavaScript 개발자, 튜토리얼 단계를 넘어선 부트캠프 졸업생, 그리고 UI를 다뤄야 하는 백엔드 개발자.
// 두 가지 방법
AI 안에서 바로 쓰거나, 한 번 다운로드하세요.
이 스킬만 파일로
$19 1회 결제
- 결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
- 파일 하나, 업데이트 없음, 커넥터 없음
- 30일 환불 보장
이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.
실제로 구매하는 것
이 React JS 튜터는 할 일 목록은 만들 수 있지만 컴포넌트가 왜 네 번 렌더링되는지, useEffect 안의 값이 왜 오래된 상태인지, 또는 그 상태가 실제로 어디에 있어야 하는지 설명하기 어려운 시점에 맞춰져 있습니다. 거의 모든 React 문제는 결국 하나의 근본적인 문제로 귀결되므로, 이 파일은 렌더링 모델부터 시작합니다. 그다음이 훅이고, 라이브러리는 마지막입니다.
이 파일을 Claude, ChatGPT 또는 Gemini에 붙여 넣으면 리렌더링을 유발하는 요인이 무엇인지 묻는 질문 하나로 현재 수준을 파악합니다. 그런 다음 수업이 순서대로 진행됩니다. 상태와 리렌더링, props와 상태 끌어올리기, 목록과 키, 제어되는 입력, useEffect와 실제로는 useEffect가 필요하지 않은 훨씬 더 흔한 경우, 훅의 규칙, context와 그 한계, 데이터 가져오기, 그리고 무언가를 측정할 수 있게 된 후에야 메모이제이션을 다룹니다. 컴포넌트가 무한 반복에 빠지면 해결책을 언급하기 전에 렌더링 중 상태를 설정하는 줄이 어느 것인지 먼저 묻습니다.
Claude, ChatGPT, Gemini에서 같은 파일과 같은 방식으로 작동합니다. 한 번 결제하면 구독이 필요 없고, 설정하는 데 약 1분이면 됩니다.
// 설치 방법
2분 이내
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 이메일로 전송됩니다. .txt 파일을 기기의 원하는 위치에 저장하세요.
- 02AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
- 03프롬프트 붙여넣기
.txt 파일을 열어 프롬프트 부분을 복사한 뒤 Claude나 ChatGPT에 붙여넣으세요. 프로젝트에 추가해 두면 언제든 바로 쓸 수 있습니다.
- 04작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다.
Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결하면 원하는 스킬을 이름으로 요청할 수 있습니다.
// faq
이 제품에 대한 질문
이 React JS 튜터가 저 대신 컴포넌트를 만들어 주나요?+
파일에서 금지하고 있습니다. 과제를 받으면 튜터는 다른 컴포넌트에 같은 패턴을 적용해 보여 줄 수 있지만, 여러분의 컴포넌트를 작성하지는 않습니다. 망가진 코드를 붙여 넣으면 어떤 줄이 상태를 변경하고 그 줄이 언제 실행되는지 묻습니다. 수정은 여러분이 직접 합니다. 핵심은 다음 주에 렌더링 루프를 스스로 디버깅할 수 있게 되는 것입니다.
훅이나 클래스 컴포넌트를 가르치나요?+
함수형 컴포넌트와 훅만 다룹니다. 저장소의 오래된 코드를 보고도 헷갈리지 않도록 클래스는 한 번 짧게 등장합니다. 순서도 의도적으로 정해져 있습니다. 렌더링 모델, 그다음 useState, 이어서 props와 상태 끌어올리기, 그리고 훨씬 뒤에 useEffect를 다룹니다. 초보자가 작성하는 useEffect 호출 중 대부분은 애초에 없어야 하기 때문입니다.
Next.js, Redux와 나머지 생태계는 어떤가요?+
React부터 시작하고 도구는 그다음입니다. 핵심을 익히고 나면 라우팅, TanStack Query를 사용한 데이터 가져오기, 컨텍스트로 충분한 경우와 상태 관리 라이브러리를 사용할 만한 경우, 그리고 Next.js에서 Server Component가 무엇을 바꾸는지 다룹니다. 이 생태계는 어떤 파일보다 빠르게 변하므로 패키지 버전을 신중하게 명시하거나 확실하지 않다고 밝힙니다.
제가 직접 읽어야 하나요?+
아니요. 이 파일은 여러분이 아니라 AI가 읽도록 작성되었습니다. 파일을 업로드하거나 한 번 붙여 넣으면 AI가 그 역할을 맡습니다. 그다음부터는 평소처럼 질문하기만 하면 됩니다. 파일을 열어 읽어 보셔도 좋지만, 이 내용을 이해하기 위해 여러분이 직접 읽어야 하는 것은 아닙니다.
AI를 전문화할 준비가 되셨나요?
이 상품과 그 밖의 2,500+개를 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서. 언제든 해지할 수 있습니다.