중첩 삼항 연산자로 곤란하다면, 객체 리터럴을 추천한다.

어떻게 하던, 빠르고 잘 동작하면 된다.

 

프로젝트 진행 중 동료 개발자분이 특정 조건에 대하여 삼항 연산자를 즐겨 사용하시는 것을 느꼈는데요.

하지만 특정 상황에서의 삼항연산자는 제가 보기가 불편했습니다.

 

그 이유는 두 개의 조건에 대응한 조건문이 삼항 연산자인데, 세 개의 조건에 대응하여

중첩 삼항연산자를 사용하셨기 때문인데요.

이에 대해 언젠간 팀원분과 이야기를 나눠보고 싶었고, 팀 컨벤션을 만들어가는 과정에서

중첩 삼항 연산자 사용에 애착을 가지셔서 블로그에만 저의 방법을 기록해 봅니다.

 

제시 조건 01. 함수로 만들어 처리하자

처음 제시했던 방법입니다. 일반 삼항 연산자라면 몰라도 중첩 삼항연산자라면 차라리 함수를 생성해

내부에서 if 문으로 분기 처리하는 것이 가독성이 좋아 향후 유지보수에 유리할 것으로 판단했거든요.

하지만 팀원분의 말씀을 듣고선 아차 싶었는데, 함수는 한 번 렌더링 될 때마다 매번 생성되는 특징을 갖고 있어

성능 부문에 있어선 오히려 마이너스 요소라 판단된다고 말씀해 주셨습니다.

 

해당 중첩 삼항 연산자는 간단한 CSS styling이어서 성능 부문에 크게 영향을 주지 않을 것으로 생각하지만

만약 특정 기능을 수행하는 중첩삼항연산자였다면 성능에 영향을 미쳤을 거에요.

이 부분은 제가 생각이 짧았었습니다. 뒤이어 제시한 또 다른 방법을 볼까요?

제시 조건 02. 객체 리터럴로 만들어 처리하자.

개인적으로는 중첩 삼항연산자보다 객체로 만들어 사용하는 것이

훨씬 가독성이 좋았고 동료분의 평가도 무난했습니다.

하지만 무조건 객체 리터럴을 사용하라고 강요할 수는 없어 우선 제가 개발할 때만 사용해야겠네요.

조건이 3개 이상일 때에도 유동적으로 조건 부여가 가능하고,

타입 설정도 나름 간편해 사용하기 좋다고 판단되었습니다.

 

예시)

// before
 {item.exampleType === '스타일1' ? (
                      <ExampleIcon01 mr="4px" />
                    ) : (
                      <ExampleIcon02 mr="2px" />
                    )}

// after
type ProjectType = '스타일1' | '스타일2' | '스타일3'; // Record type을 사용하기 위한 type 설정

// 객체 리터럴로 조건 부여
const exampleTypeList: Record<ProjectType, JSX.Element> = {
    '스타일1': <ExampleIcon01 mr="4px" />,
    '스타일2': <ExampleIcon02 mr="4px" />,
    '스타일3': <ExampleIcon03 mr="4px" />,
  };
…
(map문)
{exampleTypeList[item.exampleType as ProjectType]}