[Ionic-React] 코드의 간결성. 버릴건 버리자.

1. 개요

코드를 좀 더 가독성이 좋게, 간결하게하기 위해 버릴건 버리자.

2. 코드상세

코드 변경 전.

코드 변경 전.

/* eslint-disable no-confusing-arrow */
import { useState } from 'react';
import {
  IonButton,
  IonButtons,
  IonHeader,
  IonImg,
  IonToolbar,
} from '@ionic/react';
import styled from 'styled-components';
import { NotiState } from '../../types/home/NotiState';

const TravelitHeader = styled(IonHeader)`
  width: 100%;
`;

const TravelitLogo = styled(IonImg)`
  margin-left: 20px;
  width: 120px;
`;

const NotificationButtons = styled(IonButtons)`
  margin-right: 20px;
  &:hover {
    cursor: pointer;
  }
`;

const NotificationButton = styled(IonButton)<NotiState>`
  /* - background-image lint문제가 있습니다.
     - noti
        ? "url('/assets/icon/notification_notConfirm.png')"
        : "url('/assets/icon/notification_confirmed.png')"
    - 이부분을 소괄호로 씌워야 오류가 사라지고 그 후 자동정렬을 하면 자동으로 소괄호를 삭제하여
      오류가 다시 발생합니다.
    - 우선 임시방편으로 최상단에 lint 전체무시 구문을 추가하였습니다.*/
  background-image: ${({ noti }) =>
    noti
      ? "url('/assets/icon/notification_notConfirm.png')"
      : "url('/assets/icon/notification_confirmed.png')"};
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  &:hover {
    cursor: pointer;
  }
`;

const HomeHeader = () => {
  // 알림이 있다면 setNoti(true)로 알림 아이콘을 바꾸어 준다.
  const [noti, setNoti] = useState<boolean>(false);

  return (
    <TravelitHeader>
      <IonToolbar>
        <TravelitLogo
          slot="start"
          src="/assets/icon/travelit_logo_eng.png"
        ></TravelitLogo>
        <NotificationButtons slot="end">
          <NotificationButton
            fill="clear"
            noti={noti}
            routerLink="/noti"
          ></NotificationButton>
        </NotificationButtons>
      </IonToolbar>
    </TravelitHeader>
  );
};

export default HomeHeader;

 

코드 변경 후.

코드 변경 후.

import { useState } from 'react';
import { IonButtons, IonHeader, IonImg, IonToolbar } from '@ionic/react';
import styled from 'styled-components';
import { Icon } from '@iconify/react';

const NotiIcon = styled(Icon)`
  color: var(--ion-color-danger);
  position: absolute;
  top: -9px;
  left: -12px;
`;

const HomeHeader = () => {
  // 알림이 있다면 setNoti(true)로 알림 아이콘을 바꾸어 준다.
  const [noti, setNoti] = useState<boolean>(false);

  return (
    <IonHeader>
      <IonToolbar style={{ padding: '0px 20px' }}>
        <IonImg
          slot="start"
          src="/assets/icon/travelit_logo_eng.png"
          style={{ width: '120px' }}
        />
        <IonButtons slot="end">
          {noti && <NotiIcon icon="bi:dot" fontSize="26px" />}
          <Icon icon="ion:notifications-outline" fontSize="26px" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  );
};

export default HomeHeader;

3. 느낀점

현재 사이드 프로젝트를 하고 있는 팀장에게 수정할 곳을 코드리뷰 받았다.

나의 코드도 깔끔하다 생각했지만 좀 더 깔끔해질 수 있는 방법이 있었다.

그 와중에 lint 오류도 사라지는 경험을 할 수 있었다.

최대한 생각하여 지울건 지우고, 합칠건 합치자.