가독성

Name: readability
Rating: 92
Author: toss

코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.

핵심 패턴

동시에 실행되지 않는 코드 분리

❌ viewer/admin 로직이 한 컴포넌트에 섞임:

tsx

function SubmitButton() {
  const isViewer = useRole() === "viewer";
  useEffect(() => {
    if (isViewer) return;
    showButtonAnimation();
  }, [isViewer]);
  return isViewer ? (
    <TextButton disabled>Submit</TextButton>
  ) : (
    <Button type="submit">Submit</Button>
  );
}

✅ 분기별로 분리:

tsx

function SubmitButton() {
  const isViewer = useRole() === "viewer";
  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}
function ViewerSubmitButton() {
  return <TextButton disabled>Submit</TextButton>;
}
function AdminSubmitButton() {
  useEffect(() => { showButtonAnimation(); }, []);
  return <Button type="submit">Submit</Button>;
}

복잡한 조건에 이름 붙이기

❌ 조건이 무슨 뜻인지 바로 안 보임:

tsx

if (user.age >= 18 && !user.isBanned && user.emailVerified) { ... }

✅ 의도를 이름으로 표현:

tsx

const canPurchase = user.age >= 18 && !user.isBanned && user.emailVerified;
if (canPurchase) { ... }

빠른 참조

코드 냄새	개선 방법
중첩된 삼항 연산자	`if`문이나 early return 사용
복잡한 조건 `a && !b \|\| c`	의미있는 이름 붙이기: `const canProceed = ...`
여러 분기가 교차됨	분기별로 별도 컴포넌트 분리
코드 위아래로 왔다갔다	조건을 한눈에 볼 수 있는 객체로 관리

주의사항

•간단한 로직까지 과도하게 추상화하지 말 것
•나쁜 코드에 주석 대신 코드 자체를 개선
•"미래 유연성" 위해 깊은 계층 만들지 말 것

참고: https://frontend-fundamentals.com/code-quality/readable/