JSX 조건부 렌더링 : 삼항 연산자 vs &&

&& 연산자 사용

리액트를 깔끔하게 작성하는 방법을 적은 저자 타일러 호킨스는

조건이true 면 렌더링하고 false 아무것도 렌더링 하지 않아야 하는 경우 삼항 연산자를 사용하지마세요. &&대신 연산자를 사용하세요

라고 주장하며, 저자 켄트 C. 도즈는 반대로 **JSX에서 && 대신 삼항 연산자 사용**하는 것이 좋다고 주장하고 있습니다.

&& 보다 삼항 연산자 사용

// BAD...
function ContactList({contacts}) {
  return (
    <div>
      <ul>
        {contacts.length &&
          contacts.map(contact => (
            <li key={contact.id}>
              {contact.firstName} {contact.lastName}
            </li>
          ))}
      </ul>
    </div>
  )
}

function Error({error}) {
  return error && <div className="fancy-error">{error.message}</div>
}

// Hobbyful DEV. Style!!!
function ContactList({ contacts = [] }: ContactListProps) {
  if (contacts.length < 1) return null // fail-fast!!!!

  return (
    <div>
      <ul>
        {contacts.map((contact) => (
            <li key={contact.id}>
              {contact.firstName} {contact.lastName}
            </li>
          ))}
      </ul>
    </div>
  )
}

“삼항 연산자를 사용하자” 주장 글에서는 예제로 ContactList 가 빈배열([])경우 0을 return하여 화면에 0이 렌더링 된다는 문제를 말하고 있으면, Error함수에서는 error가 없는 경우 undefined를 return하여 렌더링 에러가 발생할 수 있다는 문제를 말하고 있습니다. 이 문제를 해결하기 위해 삼항 연산자(?””:null) 를 사용하는 것이 좋다고 주장합니다.

boolean ? <Component>: null

결론

function ContactList({contacts}) {
  return (
    <div>
      <ul>
        {
          contacts.map(contact => (
            <li key={contact.id}>
              {contact.firstName} {contact.lastName}
            </li>
          ))}
      </ul>
    </div>
  )
}
//1번 
contacts.length > 0 && <ContactList contacts={contacts}/>

//1-1번 
{
 contacts.length > 0 && contacts.map(contact => (
   <li key={contact.id}>
     {contact.firstName} {contact.lastName}
   </li>
))}

//2번 
function ContactList({contacts}) {
	if(!contacts){
		return null
	}
  return (
    <div>
      <ul>
        {
          contacts.map(contact => (
            <li key={contact.id}>
              {contact.firstName} {contact.lastName}
            </li>
          ))}
      </ul>
    </div>
  )
}
/*----------------------*/
// 1번 
function Error({error}) {
  return error && <div className="fancy-error">{error.message}</div>
}

error &&  <Error error={error}/>

// 2번 
function Error({error}) {
  return error 
        ? {<div className="fancy-error">{error.message}</div>}
        : null 
}

저는 단일 조건부 렌더링에는 && 가독성이 좋고 명시적이라고 생각하며, 저자 타일러 호킨스 글에 동감하고 있어, 문제의 예제 코드를 보고 위에 작성한 코드를 1번처럼 사용하면 되는 거 아닌가? 라는 의문이 들었습니다. 계속 생각을 하니 반면에 props를 받는데 1번 코드처럼 굳이 사용해야하나? 라는 반박도 있을 수 있다고 생각이 들었습니다.

두 글을 읽고 생각을 해보니 켄트 C. 도즈의 주장도 동감이 되어. 다른 글을 찾아 보았으며, 다양한 사람들에게 의견을 물어보았습니다.

• react native 에서는 && 연산자가 에러가 난다.
• ? “test” : null ← 뒤에 null이 붙는 게 싫다
• 삼항 연산자가 더 명시적
• && 연산자가 더 명시적

위와 같은 다양한 의견이 있었으며, 디자인에 따라서 코드는 충분히 바뀔 수도 있다고 생각되고, 정답은 없고 취향에 따라 팀 컨벤션에 따라서 또는 팀원과 의견을 조율하여 선호하시는 거를 사용하시면 될 것 같습니다.

 💡 방어 로직을 잘 작성하면 위와 같은 고민을 할 필요가 없다.! 데이터 주입 ? 데이터 강제 ?

 

참고자료

• https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component
• https://dev.to/thawkin3/react-clean-code-simple-ways-to-write-better-and-cleaner-code-2loa
• https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx