[React] jsx 조건부 속성

render() {
const { type, filterListItem } = this.props;

if (type === "radio") {
  return (
    <div className="FilterList">
      <input
        name={type}
        type={type}
        value={filterListItem}
        onChange={this.changeRadio}
      />
      <label htmlFor={filterListItem} className="filterListItem">
        {filterListItem}
      </label>
    </div>
  );
}

return (
  <div className="FilterList">
    <input
      name={type}
      type={type}
      value={filterListItem}
      checked={this.state.checked} // <- 이 부분 때문에 코드가 중복되었다.
      onChange={this.changeCheckbox}
    />
    <label htmlFor={filterListItem} className="filterListItem">
      {filterListItem}
    </label>
  </div>
);

위의 코드는 <input> 을 출력하는 컴포넌트의 return 값이다.

type을 props로 전달받아 type별로 다른 input 을 render하도록 구현 하고 싶었다.

<input type="checkbox"> 또는 <input type="radio">

그런데 한줄 때문에 코드가 중복이 되버렸다.... 매우 불편........ㅡ,ㅡ

그래서 wecode stackoverflow를 이용해서 질문을 올렸다.

선배 개발자님의 답변...ㄷㄷ

    <input
      name={type}
      type={type}
      value={filterListItem}
      {...(type !== "radio" && { checked: this.state.checked })}
      onChange={this.changeCheckbox}
    />

스프레드 연산자를 이렇게 활용할수 있다니.....

큰 깨달음 얻고 갑니다.