소나큐브 Refactor this function to reduce its Cognitive Complexity from ... to the ... allowed.

프론트엔드 코드의 인지 복잡도(Cognitive Complexity)는

코드를 이해하고 유지보수하는 데 필요한 정신적 노력의 정도를 측정하는 지표입니다.

인지 복잡도란?

인지 복잡도는 개발자가 코드를 읽고 이해하는 데 드는 정신적 부담을 수치화한 것입니다.

순환 복잡도(Cyclomatic Complexity)와 달리, 실제 개발자가 느끼는 복잡성에 더 가깝게 측정됩니다.

측정 기준

복잡도를 증가시키는 요소들

제어 구조: if, else, switch, for, while 등의 분기문과 반복문은 각각 +1점씩 추가됩니다.

중첩 구조: 제어 구조가 중첩될 때마다 추가적인 복잡도가 발생합니다. 예를 들어, if문 안의 또 다른 if문은 더 높은 점수를 받습니다.

논리 연산자: &&, || 같은 논리 연산자도 복잡도를 증가시킵니다.

재귀 함수: 재귀 호출이 있으면 추가 복잡도가 발생합니다.

프론트엔드 특화 복잡도 요소

JSX 조건부 렌더링: 삼항 연산자나 논리 연산자를 사용한 조건부 렌더링이 복잡도를 증가시킵니다.

이벤트 핸들러: 복잡한 이벤트 처리 로직은 높은 인지 복잡도를 가집니다.

상태 관리: useState, useEffect 등의 훅 사용과 복잡한 상태 업데이트 로직이 복잡도에 영향을 줍니다.

컴포넌트 props: 많은 조건부 props 처리는 복잡도를 증가시킵니다.

복잡도 수준 분류

• 1-10: 낮음 (Simple) - 이해하기 쉬운 코드
• 11-20: 중간 (Moderate) - 적당한 복잡도
• 21-50: 높음 (Complex) - 리팩토링 필요
• 50+: 매우 높음 (Very Complex) - 즉시 개선 필요

프론트엔드에서의 실제 예시

복잡도가 높은 컴포넌트 예시:

function UserProfile({ user, isAdmin, showDetails }) {
  const [editing, setEditing] = useState(false);
  const [loading, setLoading] = useState(false);
  
  const handleSave = async () => {
    if (editing) { // +1
      if (user.name && user.email) { // +2 (중첩)
        setLoading(true);
        try {
          if (isAdmin || user.canEdit) { // +3 (중첩)
            await saveUser(user);
            setEditing(false);
          } else if (user.isPremium) { // +4 (중첩)
            await saveLimitedUser(user);
          }
        } catch (error) { // +3 (중첩)
          console.error(error);
        }
        setLoading(false);
      }
    }
  };
  
  return (
    <div>
      {showDetails ? ( // +1
        <div>
          {editing ? ( // +2 (중첩)
            <EditForm />
          ) : (
            <DisplayInfo />
          )}
        </div>
      ) : (
        <SimpleView />
      )}
    </div>
  );
}

복잡도 감소 방법

함수 분해: 큰 함수를 작은 단위로 나누어 각 함수의 책임을 명확히 합니다.

조기 반환: 중첩된 조건문 대신 조기 반환을 사용하여 깊이를 줄입니다.

커스텀 훅: 복잡한 상태 로직을 커스텀 훅으로 추출합니다.

컴포넌트 분리: 하나의 컴포넌트가 너무 많은 책임을 가지지 않도록 분리합니다.

상태 관리 라이브러리: Redux, Zustand 등을 사용하여 복잡한 상태 로직을 별도로 관리합니다.