React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법

1. && 연산자로 if 문 대신하기

왼쪽 조건식이 true이면 오른쪽 jsx가 렌더링 됩니다. false이면 오른쪽 jsx가 렌더링되지 않습니다.

function Component() {

  const [mode , setMode] = useState("list")

  return (
    <div>
      { list === list && <List /> }
      { Edit === Edit && <Edit /> }
    </div>
  )
}

2. {{}}[ ] 문법 이용하기

[mode] 의 값에 따라 해당 jsx가 렌더링됩니다.

function Component() {
  
  const [mode , setMode] = useState("list")
  
  return (
    <div>
      {
        { 
           list : <List />,
           edit : <Edit />,
        }[mode]
      }
    </div>
  )
}