삼항 연산자 단순하게 하기 | Frontend Fundamentals

[giscus[bot]]

삼항 연산자 단순하게 하기 | Frontend Fundamentals

변경하기 쉬운 프론트엔드 코드를 위한 지침서

https://frontend-fundamentals.com/code/examples/ternary-operator.html

[leesh9098]

실제로 React 컴포넌트 코드 작성할 때 많이 놓치는 부분입니다
다중 삼항 연산자일 경우에 별 생각없이 그대로 삼항 연산자로 코드를 작성하면 매우 지저분한 코드가 나옵니다ㅠㅠ

[carnoxen]

Pattern Matching 문법이 들어온다면 더 개선할 수 있겠군요.

ECMAScript Pattern Matching

[SioJeong]

안녕하세요.
저도 로직이 많은 분기를 가지고 있을 때는 삼항연산자를 가급적 피하는데요.

가독성이라는 부분만 고려했을 때, if 보다 switch�도 좋은 선택지가 될 수 있을 것 같은데, 이에 대해 어떻게 생각하시나요?

[carnoxen]

Switch 구문은 그놈의 break 의무가 발목을 잡아서 그리 추천하고 싶지 않습니다...

[Kimbangg]

저는 한 가지의 값이 3개 이상의 분기를 가질 때는 Switch 문 사용을 선호합니다 👀

[SioJeong]

이미 관련 내용에 대해 활발히 논의되고 있었군요!

조건부 렌더링 처리, 다들 어떻게 처리하시나요?

[Phryxia]

경험상 삼항연산자가 4항, 5항으로 불어난 적이 있어, 그냥 용도별 boolean 변수를 만들고 &&를 쓰는 편입니다. 조건이 복잡하면 renderXXX 함수를 만들어서 위에서 언급된 if나 switch를 쓰곤 합니다.

// 초기
const isListShown = !!data?.length
const isLoadingShown = !data?.length

return (
  <>
    {isListShown && <SomeList data={data} />}
    {isLoadingShown && <Loading />}
  </>
)

// 후에 이런 식으로 추가되는 경우를 많이 경험
const isListShown = !!data?.length
const isPromotionShown = isLoaded && !data?.length
const isLoadingShown = !isLoaded