조건부 랜더링 처리

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

TOSS Frontend fundamentals을 읽다가 관련 Discussion을 찾았다.

&&, if, switch 등의 다양한 조건문의 선택이 늘 고민이었는데, 다른 개발자들의 의견이 좋아서 몇개 가져왔다.

의견 1. <항목과 조건의 수> 관점

논리 연산자, 삼항 연산자, 컴포넌트 모두 사용
https://github.com/toss/frontend-fundamentals/discussions/4#discussioncomment-11827431

1. 단일 항목 단일 조건일 경우에는 삼항연산자나 논리연산자 사용
   isLoading && <Loading/>

2. 단일 항목 복수 조건일 경우 switch

 switch(state){
  case "READY":
     return <Ready/>;
  case "PROGRESS":
     return <Progress/>;
  case "DONE":
     return <Done/>;

3. 복수 항목 복수 조건일 경우 컴포넌트 작성

return (
  <AccessManager country={["KR", "US", "JP"]} version="2.6.10" fallback={<Fallback/>}>
      <Content/>
  </AccessManager>
	)

의견 2. 타입 안전성 보장 관점

컴포넌트를 사용한 조건부 랜더링은 JavaScript에서 Short-circuiting이 보장되지 않는다.
https://github.com/toss/frontend-fundamentals/discussions/4#discussioncomment-11828133

1. 컴포넌트의 조건부 랜더링

<If condition={value != null}>
  <span>값: {value}</span>
</If>

-> 이 조건부 랜더링하는 컴포넌트를 JSX가 아닌 JS로 뜯어보면?

React.createElement(If, { condition: value != null }, [
  // 이 라인은 value 값에 관계없이 항상 평가됨
  React.createElement('span', {}, `값: ${value}`)
]);

React.createElement(...) 함수 호출은 항상 이루어진다.

2. 삼항연산자로 조건부 랜더링

value != null ? (
  <span>값: {value}</span>
) : null

value != null ? (
  // value == null 이면 이 함수 호출이 완전히 무시됨
  React.createElement('span', {}, `값: ${value}`)
) : null

언어 레벨에서 안전하게 코드를 다룰 수 있다.