Conditional Rendering

https://www.vobour.com/book/view/gT7qPZQ45nBDSRr2M

리액트(React) 이해 기초 2 - Conditional Rendering

if /else

const ConditionalComponent = ({ loading, data }) => {
  if (loading) {
    return <LoadingComponent />
  }
  return <h1>{data}</h1>
};

switch / case

const Dialog({ type, ...rest }) => {
    switch(type) {
        case 'share':
            return <ShareDialog {...rest} />;
        case 'edit':
            return <EditDialog {...rest} />;
        case 'delete':
            return <DeleteDialog {...rest} />;
        default:
            return null;
    }
};

&& ||

const LogicalAnd = ({ username }) => {
  return (
    <h1>
      {username && <span>username</span>}
    </h1>
  );
};

const LogicalOr = ({ username }) => {
  return (
    <h1>
      {username || 'no username'}
    </h1>
  );
};

삼항 연산자

const TernaryComponent = ({ loading, data }) => {
  return {loading ? <LoadingComponent /> : <h1>data</h1>};
};

High order component

const Success = () => {
  return <h1>good</h1>;
};

const False = () => <h1>condition fail</h1>;

const withCondition = (condition, FalsyComponent) => {
  if (condition()) {
    return WrappedComponent => WrappedComponent;
  }
  return () => FalsyComponent;
};

const SuccessWithCondition = withCondition(() => false, False)(Success);

객체활용. prop값 많을 때

import {
  SHARE_DIALOG,
  CONFIRM_EDIT_DIALOG,
  CONFIRM_DELETE_DIALOG,
} from './constants/ui';

import ShareDialog from './ShareDialog';
import ConfirmEditDialog from './ConfirmEditDialog';
import ConfirmDeleteDialog from './ConfirmDeleteDialog';

const DIALOG_COMPONENTS_MAP = {
  [SHARE_DIALOG]: ShareDialog,
  [CONFIRM_EDIT_DIALOG]: ConfirmEditDialog,
  [CONFIRM_DELETE_DIALOG]: ConfirmDeleteDialog,
};

const GlobalDialog = ({ open, onClose, dialogType, dialogProps }) => {
  if (!dialogType || !DIALOG_COMPONENTS_MAP[dialogType]) {
    return null;
  }

  const SpecificDialog = DIALOG_COMPONENTS_MAP[dialogType];

  return <SpecificDialog {...dialogProps} open={open} onClose={onClose} />;
};