You Might Not Need an Effect — 페이먼츠 요약 가이드

원문: react.dev/learn/you-might-not-need-an-effect 

카드: Q5. 검증과 에러 책임, Q6. 카드 브랜드

이 페이지는 전체 번역이 아닌 요약 가이드입니다. 원문은 매우 길고 다양한 사례를 다루므로, 페이먼츠 1단계 학습 포인트와 직접 연결되는 부분만 추렸습니다. 정확한 표현이나 다른 사례가 필요하면 항상 원문 을 함께 보세요.

한 문장으로 요약하면

useEffect가 필요한 자리는 생각보다 적다. Effect는 React 외부 시스템과의 동기화에만 필요하고, 컴포넌트 내부의 데이터 흐름에는 대부분 필요 없다.

원문의 핵심 한 줄 인용:

Effects are typically used to “step out” of your React code and synchronize with some external system.

번역:

Effect는 보통 React 코드를 벗어나 어떤 외부 시스템과 동기화할 때 사용합니다.

페이먼츠 1단계와 연결되는 두 부분

1. 파생값은 Effect가 아니다 (Q5·Q6)

firstName과 lastName이 있을 때, fullName은 Effect로 만들 필요가 없다.

// ❌ 안 좋은 패턴
const [fullName, setFullName] = useState('');
useEffect(() => {
  setFullName(firstName + ' ' + lastName);
}, [firstName, lastName]);
 
// ✅ 좋은 패턴 — 렌더링 도중 계산
const fullName = firstName + ' ' + lastName;

페이먼츠 1단계에 적용하면:

• 에러 메시지는 input 값으로부터 매번 계산할 수 있다 → Q5
• 카드 브랜드는 cardNumber로부터 매번 식별할 수 있다 → Q6

원문 인용:

If you can calculate something from existing props or state, don’t put it in state. Instead, calculate it during rendering.

번역: 기존 props나 state로부터 무언가를 계산할 수 있다면, state에 두지 마라. 대신 렌더링 도중에 계산하라.

2. 비싼 계산만 useMemo로 캐싱

파생값 계산이 정말 느릴 때만 useMemo로 결과를 기억해둔다. 그러나 페이먼츠 1단계의 카드번호 식별·간단한 검증은 충분히 빠르므로 useMemo가 거의 필요 없다.

카드와 어떻게 연결되나

Choosing the State Structure 전체 번역의 *3번 원칙(Avoid redundant state)*과 함께 읽으면 기준이 더 분명해진다.

원문에서 더 읽을거리

원문은 다양한 Effect 안티패턴을 사례별로 다룹니다. 자주 만나는 상황:

• 부모로부터 받은 props로 state를 초기화하는 상황
• prop이 바뀌면 state를 리셋해야 하는 상황
• 사용자 이벤트가 일어났을 때 외부 함수를 호출하는 상황 (이건 Effect가 아니라 이벤트 핸들러에서)
• 부모에 데이터를 알려주는 상황 (Effect가 아니라 상태 끌어올리기로)

각 사례의 코드 비교 + 안티패턴 vs 좋은 패턴은 원문 에서 직접 확인하세요.

🇬🇧 원문 페이지: You Might Not Need an Effect — react.dev 

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