문제 1: 복잡한 삼항 연산자 대신할 방법?

{filteredQuizzes.length === 0 && allQuizzes.length > 0 && (
          <EmptyMessage>
            {filterType === 'SOLVED'
              ? '푼 문제가 없습니다.'
              : filterType === 'UNSOLVED'
                ? '안 푼 문제가 없습니다.'
                : '아직 퀴즈가 없습니다.'}
          </EmptyMessage>
        )}
        {allQuizzes.length === 0 && <EmptyMessage>아직 퀴즈가 없습니다.</EmptyMessage>}

현재 코드는, 푼문제 안푼문제, 전체퀴즈 탭에 따라 삼항 연산자로 비어있는 상황의 메세지를 분기처리 하고 있습니다.

이는 복잡하고, 가독성이 많이 떨어집니다. 삼항 연사자 자체를 최대한 쓰는걸 지양하는 것이 맞다고 생각합니다.

이에 멘토님 의견처럼 getemptyMessage라고 비어있는 상태 메세지 분기처리를 아예 함수로 분리하고자 합니다.

const getEmptyMessage = (filterType: FilterType, hasQuizzes: boolean): string => {
  if (!hasQuizzes) {
    return '아직 퀴즈가 없습니다.';
  }

  switch (filterType) {
    case 'SOLVED':
      return '푼 문제가 없습니다.';
    case 'UNSOLVED':
      return '안 푼 문제가 없습니다.';
    case 'ALL':
    default:
      return '아직 퀴즈가 없습니다.';
  }
};

먼저 분기처리되는 상태값(필터타입) 과 퀴즈가 있는지 여부를 인자로 받습니다.

저 두가지 상태를 인자로 받아야, 원래코드처럼 굳이 퀴즈가 있는 상태와 없는 상태를 따로 체크하며 퀴즈가있을 때는 삼항연산자로 케이스를 분리하고, 없을때는 또 퀴즈가 없다는 메세지를 띄우는 복잡한 상황을 다 체크할 수 있습니다.

이후로는 단순하게 hasQuizzes 가 false 인 상황,

그리고 필터타입에따른 switch case 문으로 분기처리를 진행하였습니다.

{(filteredQuizzes.length === 0 || allQuizzes.length === 0) && (
          <EmptyMessage>{getEmptyMessage(filterType, allQuizzes.length > 0)}</EmptyMessage>
        )}

이후에는 다음과 같이, 이제 퀴즈가 있는 상태 없는상태 따로 코드를 작성하지 않고, 필터링된퀴즈가 없거나 모든 퀴즈가 없을 때, 두번째 인자에는 모든 퀴즈의 존재 여부를 인자값으로 넣어줘어 깔끔하게 코드 작성이 가능하게 되었습니다.