React Props 조건문

삼항 연산자 사용

function Link({ href, target, children }) {
  return (
    <a
      href={href}
      rel={target === '_blank' ? 'noopener' : undefined}
    >
    {children}
    </a>
  );
}

Spread 연산자 사용

const props = { title: 'bar' };

function Link({ href, target, children }) {
  if (target === '_blank') {
    props.rel = 'noopener';
  }

  return <a href={href} { ...props }>{children}</a>;
}

객체 속성 조건문 

function Link({ href, target, children }) {
  const condition = target === '_blank';
  const props = {
    href,
    // using the ternary operator:
    ...( condition ? { title: 'Opens in new tab' } : {} ),
    // using the logical && operator:
    ...( condition && { rel: 'noopener' } ),
  };
  
  return <a { ...props }>{children}</a>;
}

function Link({ href, target, children }) {
  const condition = target === '_blank';

  return (
    <a
      href={href}
      // using the ternary operator:
      { ...( condition ? { title: 'Opens in new tab' } : {} ) }
      
      // using the logical && operator:
      { ...( condition && { rel: 'noopener' } ) }
    >
      {children}
    </a>
  );
 }

변경된 값만 API 전송 처리시 if문으로 작성 할 수 있지만

const payload = {};
if (newName !== oldName) {
  payload.name = newName;
}
if (newAge !== oldAge) {
  payload.age = newAge;
}
if (newHairColor !== oldHairColor) {
  payload.hairColor = newHairColor;
}
if (newCar !== oldCar) {
  payload.car = newCar;
}

API.post('/profile', payload);

위와 같은 코드 대신에 이렇게 작성 할 수 있습니다.

API.post('/profile', {
  ...(newName !== oldName && { name: newName }),
  ...(newAge !== oldAge && { age: newAge }),
  ...(newHairColor !== oldHairColor && { hairColor: newHairColor }),
  ...(newCar !== oldCar && { car: newCar })
});