Reusing Logic with Custom Hooks — 페이먼츠 요약 가이드

원문: react.dev/learn/reusing-logic-with-custom-hooks 

카드: 페이먼츠 2단계 시작 직전 AHA(Avoid Hasty Abstractions) 보조 자료. Q1. state 위치의 PR #361 사례와 직접 만남.

이 페이지는 전체 번역이 아닌 요약 가이드입니다. 페이먼츠 2단계 진입 직전 크루가 훅으로 추출하고 싶은 마음을 한 박자 늦추는 데 필요한 부분만 추렸습니다. 정확한 표현이 필요하면 항상 원문 을 함께 보세요.

한 문장으로 요약하면

커스텀 훅은 컴포넌트들 사이에서 로직을 공유한다 — 단, 상태 자체는 공유하지 않는다. 같은 훅을 두 곳에서 호출해도, 두 호출은 완전히 독립적이다.

원문 핵심 한 줄:

Custom Hooks let you share logic between components, but they don’t share state itself. Each call to a Hook is completely independent from every other call to the same Hook.

번역:

커스텀 훅은 컴포넌트들 사이에서 로직을 공유하게 해줍니다. 그러나 상태 자체는 공유하지 않습니다. 같은 훅을 호출하는 모든 호출은 서로 완전히 독립적입니다.

언제 훅을 추출하는가 — 페이먼츠 2단계의 핵심

페이먼츠 2단계 프로그래밍 요구사항에 다음 한 줄이 있습니다:

처음부터 훅 구조를 설계하지 않는다. 먼저 1단계 스타일로 완성한 뒤 중복을 확인하고 추출한다.

이 한 줄은 React 공식 권고와 같은 방향입니다.

원문 인용:

If you find yourself repeating the same code in multiple places, you can extract it into a Custom Hook.

번역: 같은 코드를 여러 곳에서 반복하고 있는 것을 발견하면, 그것을 커스텀 훅으로 추출할 수 있습니다.

핵심 순서: 반복을 본 뒤 추출. 그 반대 순서(훅을 먼저 짜고 그것을 어디 쓸지 고민)는 Q1 카드의 PR #361에서 어떻게 어려워지는지 직접 확인할 수 있습니다.

훅의 세 가지 표지

원문이 말하는 커스텀 훅의 핵심 특징:

1. 이름이 use로 시작한다. 단순 컨벤션이지만 React 도구·린터가 이를 기준으로 훅 규칙을 검증한다.
2. 다른 훅을 호출할 수 있다. useState, useEffect, 또는 다른 커스텀 훅을 내부에서 호출.
3. 상태가 아니라 상태 있는 로직을 공유한다. useCounter()를 두 컴포넌트에서 호출해도, 각 호출은 자기만의 카운터 상태를 가진다.

페이먼츠 카드와 어떻게 연결되나

페이먼츠 2단계 진입 전 한 가지 권고

원문은 훅을 만드는 방법을 다양한 사례로 보여주지만, 페이먼츠 2단계에서 가장 중요한 한 가지 메시지는 — 훅이 만들고 싶어지면 한 박자 늦춰라.

먼저 1단계 스타일로 그대로 완성해본다. 그다음:

• 같은 코드가 여러 곳에 반복되고 있는가?
• 그 반복이 진짜 같은 의미인가, 아니면 우연히 비슷해 보이는 다른 의미인가?
• 추출하면 호출하는 쪽이 더 단순해지는가, 아니면 추출된 훅의 인터페이스가 더 복잡해지는가?

이 세 질문을 다 통과한 뒤에 추출하라.

Avoid Hasty Abstractions — Kent C. Dodds의 AHA Programming 과 함께 읽으면 기준이 더 분명해진다.

원문에서 더 읽을거리

원문은 다음 사례들을 다룹니다 (페이먼츠 1·2단계 외 일반 가이드):

• useOnlineStatus 같은 외부 시스템 동기화 훅
• useFormInput 같은 상태와 핸들러를 함께 가진 훅
• 훅 사이에 값을 전달하는 패턴
• 훅으로 묶지 않아도 되는 자리 (조기 추상화 회피)

원문 에서 직접 확인하세요.

🇬🇧 원문 페이지: Reusing Logic with Custom Hooks — react.dev 

인용은 CC BY 4.0  하에 react.dev 커뮤니티가 작성한 원문에서 짧게 옮긴 것입니다.