[React] 조건에 따라 컴포넌트 props 전달하기

가끔 리액트의 컴포넌트를 호출하는 시점에서 props를 조건부로 넘기고 싶은 니즈가 생기는 순간이 있다. 이때 다음과 같이 작성하면 조건에 따라 props를 넘길 수 있다.

import {useState} from 'react'
  
const Home = () => {
    const [title, setTitle] = useState('');
    
    return (
      <Container
        className="home"
        {...(title && { containerTitle: title})}
      >
        <div>이것은 테스트</div>
      </Container>
    )
}

export default Home

title이 존재하는 경우

 <Container
   className="home"
   containerTitle={title}
 >
   <div>이것은 테스트</div>
 </Container>

title이 존재하지 않는 경우

 <Container
   className="home"
 >
   <div>이것은 테스트</div>
 </Container>

다음과 같이 title의 유무에 따라 넘어가는 props의 개수를 다르게 할 수 있다.