React 컴포넌트 props 조건문

삼항 연산자 조건문

function App() {
  const [mood] = React.useState("happy");
  const greet = () => alert("Hi there! :)");

  return (
    <button onClick={greet} disabled={"happy" === mood ? false : true}>
      Say hi
    </button>
  );
}

if문

function App() {
  let disabled = true;
  const [mood] = React.useState("happy");
  const greet = () => alert("Hi there! :)");

  if ("happy" === mood) {
    disabled = undefined;
  }

  return (
    <button onClick={greet} disabled={disabled}>
      Say hi
    </button>
  );
}

Spread 연산자

function App() {
  let required = false;
  let type = "password";
  let disabled = true;

  if ("password" === type) {
    required = true;
    disabled = false;
  }

  return <input type={type} disabled={disabled} required={required} />;
}

아래 처럼 Spread 연산자를 사용하여 코드를 단순화 할 수 있습니다.

function App() {
  let fieldProps = {
    type: 'password',
    disabled: true,
  };

  if ("password" === fieldProps.type) {
    fieldProps.required = true;
    fieldProps.disabled = false;
  }

  return <input {...fieldProps} />;
}