[ react. 조건에 따른 컴포넌트 바꾸기 ]

리액트를 사용하다보면 조건부 렌더링을 자주 사용하게 된다.

const isShow = props.isShow

return {
  isShow 
   ? (<ShowIcon size={10} color={'red'} {...restProps} />)
   : (<HideIcon size={10} color={'red'} {...restProps} />)
}

위의 예시처럼 컴포넌트에 전달할 props는 동일한데, 조건에 따라 컴포넌트만 다른 경우 아래와 같은 방법도 있다.

const isShow = props.isShow

const statusIcon = {
  show: ShowIcon,
  hide: HideIcon
}

const StatusIconComponent = statusIcon[isShow ? 'show' : 'hide']


return <StatusIconComponent size={10} color={'red'} {...restProps} />