<aside>

🧑🏻‍💻 가독성(Readability)은 코드가 읽기 쉬운 정도를 말한다. 코드가 변경하기 쉬우려면 먼저 코드가 어떤 동작을 하는지 이해할 수 있어야 한다.

읽기 좋은 코드는 읽는 사람이 한 번에 머릿속에서 고려하는 맥락이 적고, 위에서 아래로 자연스럽게 이어진다.

즉, 좋은 코드는 가독성이 높은 코드를 의미한다.

</aside>

1. 맥락 줄이기

1-1) 같이 실행되지 않는 코드 분리하기

동시에 실행되지 않는 코드가 하나의 함수 또는 컴포넌트에 있으면, 동작을 한 눈에 파악하기 어렵다. 구현 부분에 많은 숫자의 분기가 들어가서, 어떤 역할을 하는지 이해하기 어렵기도 하다.

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  useEffect(() => {
    if (isViewer) {
      return;
    }
    showButtonAnimation();
  }, [isViewer]);

  return isViewer ? (
    <TextButton disabled>Submit</TextButton>
  ) : (
    <Button type="submit">Submit</Button>
  );
}

<SubmitButton /> 컴포넌트에서는 사용자가 가질 수 있는 2가지의 권한 상태를 하나의 컴포넌트 안에서 한 번에 처리하고 있다. 그래서 코드를 읽는 사람이 한 번에 고려해야 하는 맥락이 많다.

예를 들어, 다음 코드에서 파란색은 사용자가 보기 전용 권한('viewer')을 가지고 있을 때, 빨간색은 일반 사용자일 때 실행되는 코드다. 동시에 실행되지 않는 코드가 교차되어서 나타나서 코드를 이해할 때 부담을 준다.

따라서 위 코드는 아래처럼 개선할 수 있다.

다음 코드는 사용자가 보기 전용 권한을 가질 때와 일반 사용자일 때를 완전히 나누어서 관리하도록 하는 코드이다.

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}

function ViewerSubmitButton() {
  return <TextButton disabled>Submit</TextButton>;
}

function AdminSubmitButton() {
  useEffect(() => {
    showAnimation();
  }, []);

  return <Button type="submit">Submit</Button>;
}

• <SubmitButton /> 코드 곳곳에 있던 분기가 단 하나로 합쳐지면서, 분기가 줄어들었다.
• <ViewerSubmitButton />과 <AdminSubmitButton /> 에서는 하나의 분기만 관리하기 때문에, 코드를 읽는 사람이 한 번에 고려해야 할 맥락이 적다.

1-2) 구현 상세 추상화

한 사람이 코드를 읽을 때 동시에 고려할 수 있는 총 맥락의 숫자는 제한되어 있다고 한다. 내 코드를 읽는 사람들이 코드를 쉽게 읽을 수 있도록 하기 위해서 불필요한 맥락을 추상화할 수 있다.

다음 <LoginStartPage /> 컴포넌트는 사용자가 로그인되었는지 확인하고, 로그인이 된 경우 홈으로 이동시키는 로직을 가지고 있다.