[ESLint] no nested ternary, Do not nest ternary expressions 해결

 

삼항연산자를 중첩해서 사용하니 발생하는 ESLint 오류

Quick Fix 링크를 들어가보니 

 

ternary 즉 삼항연산자를 중첩해서 사용하면 가독성이 떨어지기 때문에 권장하지 않는 것.

 

권장하지 않는 방식

var thing = foo ? bar : baz === qux ? quxx : foobar;

foo ? baz === qux ? quxx() : foobar() : bar();

 

 

권장하는 방식은 밑의 코드처럼 

삼항연산자를 한번만 사용하거나! else-if문으로 나눠주는 방식, 사이트엔 없지만 switch도 있다.

var thing = foo ? bar : foobar;

var thing;

if (foo) {
  thing = bar;
} else if (baz === qux) {
  thing = quxx;
} else {
  thing = foobar;
}

 

 

하지만 필자는 위 에러가난 부분이 JSX구문이여서 코드를 깔끔히 써주고 싶었기 때문에 

객체 대괄호 표기법을 사용하여 코드를 수정해주었다.

 

객체 접근방법은 두가지 방식이 있는데 하나는 점표기법(많이들 사용하는 방식) , 하나는 대괄호 표기법이다.

const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 1969,
}; //객체 선언

//점표기법
console.log(myCar.make)

//대괄호 표기법
console.log(myCar["make"])

 

const ticketTypeMappings = {
  Y: "정탐",
  N: "오탐",
};


<TdEnd style={{ textAlign: "center" }} maxWidth="34px">
    {ticketTypeMappings[ticket.ticketType] || ticket.ticketType}
</TdEnd>

 

평소에 객체를 점표기법으로만 접근을 해서 대괄호 표기법을 잊고 살았었는데

이렇게 동적으로 받은 데이터의 값에 따라 렌더링하는 값을 달리하고 싶을 때 요긴하게 사용할 수 있을 것 같다.