React 컴포넌트에 조건부로 props 추가 방법 (style, event handler)

props를 객체로 정의 하고 Spread operator(...)를 사용하여 컴포넌트에 전달할 수 있습니다.

<Component title="React" label="library" />

// can be rewritten as 

const props = {
  title: 'React',
  label: 'library'
}

<Component {...props} />

 

조건에 따라서 추가하거나 제거 하려면 삼항 연산자(a?b:c) 또는 if-else 문을 사용

 

예제1.

//using ternary operator
const App = () => {

  const [isShowDescription, setIsShowDescription] = useState(false);

  const customProps = {
    label: "Hello",
    size: 100 
  }
  return (
    <CustomComponent
      { ...customProps }
      {...(
        isShowDescription ?
        { description: 'added description property' } :
        {}
      )}
    />
  );
}

export default App;

예제2.

//using if-else statement
const App = () => {

  const [isHeight, setIsHeight] = useState(false);
  const boxProps = {}

  if (isHeight) {
    boxProps.height = "200px";
  }

  return (
    <Box 
      { ...boxProps }
    />
  );
  
}

export default App;

 

Solution #1: Inline conditionals in attribute 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>
  );
}

Solution #2: if statements
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>
  );
}


Solution #3: Spread props to child component

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

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

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

 

 <Child {...(editable && { editable: editableOpts } )} />
 
 <Child {...(this.props.editable && { editable: this.props.editableOpts })} />
 
 <Child {...(canClick && { onClick: this.handler })} />
 
 <Child onClick={canClick ? this.handler : undefined} />
 
  <Child onClick={(canClick && this.handler) || null} />