React Loop 모음

 

리액트에서 사용하는루프 정리

 

...


const ORDER_BY_PUBLISH_DT = 'PUBLISH_DT';
const ORDER_BY_EXP_DAYS = 'EXP_DAYS';
const ORDER_BYS = {
  [ORDER_BY_PUBLISH_DT]: '최근등록순',
  [ORDER_BY_EXP_DAYS]: '마감임박순',
};

const NoticeItems = (props) => {
  ...

  return (
    <>
      <article className={cx('items')}>
        <div>
          <div className={cx('wrap-count')}>
            <span className={cx('count')}>
              총 <span>{Util.setComma(totalCount)}</span>개
            </span>
            <span className={cx('order')} onClick={() => context.openPopup(POPUP_ORDER_BY)}>
              {ORDER_BYS[orderBy]}
            </span>
          </div>

          {(() => {
            if (items && items.length > 0) {
              return (
                <ul>
                  {items.map((item, index) => (
                    <NoticeItem key={item.ID} item={item} index={index} banner={banner} />
                  ))}
                </ul>
              );
            } else {
              return (
                <div className={cx('nodata')}>
                  <div className={cx('empty-box')}>
                    <img src="/images/new/image_empty_house.svg" />
                  </div>
                  <strong>조건에 해당하는 지점이 없습니다</strong>
                </div>
              );
            }
          })()}
        </div>
      </article>

      {refHasMore.current && <ListLoading />}

      <MoveUpFilterPop title="" subtitle="" popupName={POPUP_ORDER_BY}>
        <ul className={cx('wrap-order-by')}>
          {Object.keys(ORDER_BYS).map((key, index) => {
            return (
              <li
                className={cx({ on: key === orderBy })}
                onClick={() => {
                  setOrderBy(key);
                }}
              >
                {ORDER_BYS[key]}
              </li>
            );
          })}

          {Object.values(ORDER_BYS).map((value, index) => {
            return (
              <li
                className={cx({ on: value === orderBy })}
                onClick={() => {
                  // setOrderBy(key);
                }}
              >
                {value}
              </li>
            );
          })}
        </ul>
      </MoveUpFilterPop>
    </>
  );
};

export default NoticeItems;