whatool 도구 안내 · AI 스킬

Composition Patterns

React 화면 코드를 다시 쓰기 쉬운 작은 부품으로 정리합니다.

이 도구는 무엇을 하나요?

React 화면 코드를 다시 쓰기 쉬운 작은 부품으로 정리합니다.

어디에서 어떻게 쓰나요?

AI에게 작업 순서와 주의사항을 알려주는 스킬입니다. 별도 웹서비스에 로그인하는 방식과 다릅니다.

처음 시작하는 순서

  1. 스킬과 React 프로젝트, 복잡해진 화면 부품 하나를 준비합니다.
  2. 동작을 유지할 조건을 정하고 코드 구조를 검토합니다.
  3. 작은 복사본이나 시험 프로젝트로 결과를 확인하고 실제 자료에 적용합니다.

무료로 어디까지 할 수 있나요?

MIT 조건으로 공개된 스킬·코드 자체를 받을 때 별도 구매비는 없습니다. 스킬을 실행하는 AI까지 무료라는 뜻은 아닙니다.

돈이 드는 부분은 따로 있어요

실행하는 AI의 구독·사용량은 별도입니다. 외부 서비스나 유료 이미지 생성 기능을 추가하면 그 요금도 따로 적용됩니다.

어떤 자료를 읽거나 바꿀 수 있나요?

아래는 사용 전에 살펴볼 접근 범위입니다. 모두 필수 권한이라는 뜻은 아니며, 실제 허용 범위는 설치 설정과 계정에 따라 달라집니다.

  • 코드를 읽고 수정·시험할 수 있습니다. 구조가 바뀌어도 기존 화면 동작이 같은지 확인해야 합니다.

설명의 근거

공식·제작자 문서 확인: 2026-09-19. 제작자 원문에서 용도·시작 절차·비용 경계·접근 범위를 대조했습니다. 아래 예시는 그 기능을 설명하기 위한 작성 예시이며 직접 설치 시험은 하지 않았습니다.

이럴 때 사용해요

  • React 화면 부품을 재사용하기 쉽게 나누기 일을 반복하거나 처음 시도할 때

무엇을 준비하나요?

  • 중복이 많은 React 컴포넌트
  • 원본을 보존한 시험 자료

연결한 AI에게 요청하는 예시

옵션이 너무 많은 버튼 코드를 역할별로 나누되 모양은 유지해줘.

어떤 결과가 나오나요?

  • 재사용하기 쉬운 부품 구조와 회귀 시험 결과

사용 장면을 설명하기 위해 작성한 예시이며, 실제 실행한 결과나 화면을 보장하는 설명은 아닙니다.

사용 전에 확인하세요

  • 스킬과 React 프로젝트, 복잡해진 화면 부품 하나를 준비합니다.
  • 동작을 유지할 조건을 정하고 코드 구조를 검토합니다.
  • 작은 복사본이나 시험 프로젝트로 결과를 확인하고 실제 자료에 적용합니다.

비용: MIT 조건으로 공개된 스킬·코드 자체를 받을 때 별도 구매비는 없습니다. 스킬을 실행하는 AI까지 무료라는 뜻은 아닙니다.

원본 제공처에서 최신 설명과 이용·설치 방법 확인