[React] jsx 조건부 속성

하태현·2020년 12월 26일
1

React

목록 보기
4/11
post-thumbnail
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}
    />

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

큰 깨달음 얻고 갑니다.

profile
왜?를 생각하며 개발하기, 다양한 프로젝트를 경험하는 것 또한 중요하지만 내가 사용하는 기술이 어떤 배경과 이유에서 만들어진 건지, 코드를 작성할 때에도 이게 최선의 방법인지를 끊임없이 질문하고 고민하자. 이 과정은 앞으로 개발자로 커리어를 쌓아 나갈 때 중요한 발판이 될 것이다.

0개의 댓글