에러
eslint(no-nested-ternary)
Nesting ternary expressions can make code more difficult to understand.
발생 경위
jsx를 렌더할 때 삼항 연산자를 사용하다보니 간혹 중첩해서 쓰는 경우가 있는데, 경고 문구를 받았다.
"no-nested-ternary" eslint rule
가장 먼저 👉 ESLint rules 공식에서 힌트를 얻었다.
중첩된 삼항연산자는 가독성을 떨어뜨려 코드를 읽기 힘들게 만든다..고.
🛑 만약 여기에 "오류"라고 표시되면 누군가가 (혹은 사전에 정의된 규칙들이) 해당 규칙을 "오류" 수준으로 활성화하기로 결정했다는 것이다.
✅ 만약 당신이 개인이라면.eslintrc에서 비활성화 할 수 있고, 팀이라면 함께 논의해 볼 필요가 있다.
작동상 오류는 아니지만, Lint가 코드를 읽기 쉬운 방향으로 제안을 주는 것이기 때문에 중첩된 삼항연산자 사용 외에 어떻게 구현할 수 있을지 고민해보았다.
eslintrc 설정 off
다른 rule과 마찬가지로 .eslintrc에서 "off"로 설정한 후에 재시작하면 에러는 사라진다. error, warn, off가 있으며 error가 기본값이다.
"rules": {
"no-nested-ternary": "off",
}중첩된 삼항연산자를 다르게 작성하는 방법
// 문제의 중첩 삼항연산자
// location으로 전달된 state가 있으면 ?
// state.name을 출력한다. :
// 아니면 로딩중인지 확인하고 ?
// 로딩중이라면 로딩을 출력하고 :
// fetch가 되었다면 info state의 name을 보여준다.
<Title>
{state?.name ? state.name : loading ? "Loading..." : info?.name}
</Title>IIFE
얼마전 IIFE in react로 if statement를 사용할 수 있다는 것이 떠올라 바로 적용해 보았다. 생각보다 나쁘지 않은 것 같기도?
<Title>
{(() => {
if (state?.name) {
return state.name;
}
if (loading) {
return "Loading...";
}
return info?.name;
})()}
</Title>jsx 밖에서 렌더하기
eslint rule detail에서 나온 방법을 jsx 밖에서 렌더하는 방식으로 작성해 보았다.
function Temp() {
// 생략
let CoinTitle = null;
if (state?.name) {
CoinTitle = state.name;
} else if (loading) {
CoinTitle = "Loading...";
} else {
CoinTitle = info?.name;
}
return <Title>{CoinTitle}</Title>;
}
두가지 방법으로 작성해보니 중첩 삼항연산자보다 가독성 면에서 나은 것 같다. 어떤 것이 좋다 딱 떨어지게 나누기엔 경험치가 부족한 것 같아서. 개인이나 팀의 린트 설정에 따라 달라질 것 같다.
출처
