[재활용 프로젝트][리액트] 카카오 api 카테고리 마커 세부화

목차

 

저번 카테고리별 마커에 적절한 이미지를 넣고 더 컴포넌트를 세부화 시켜 작성해 보았다.

 

완성 모습

이미지 찾는데 시간을 더 많이 쓴 듯?

 

컴포넌트의 세분화

아래 코드를 보면 크게 컴포넌트를 카테고리, 사이드바, 프로필, 메뉴 4개로 만들었다.

import { ReactElement } from 'react';
import styles from './KakaoHeader.module.scss';
import SideBar from '../sidebar/SideBar';
import HeaderCategory from './HeaderCategory';
import HeaderProfileMenu from './HeaderProfileMenu';

// 카테고리 헤더

function KakaoHeader(): ReactElement {
  // console.log(MarkerState);
  return (
    <div className={styles.category}>
      <img
        src="../img/sejonglogo.png"
        alt="LogoImage"
        className={styles.ImgStyle}
      />
      <HeaderCategory />
      <SideBar />
      <div className={styles['profile-menu']}>
        <HeaderProfileMenu isButton="div" name="profile" />
        <HeaderProfileMenu isButton="button" name="menu" />
      </div>
    </div>
  );
}

export default KakaoHeader;

 

컴포넌트의 재활용성 증가

공통 부분을 빼내어 컴포넌트의 재활용을 높였다

import styles from './HeaderProfileMenu.module.scss';

export interface style_menu {
  isButton: string;
  name: string;
}

function HeaderProfileMenu({ isButton, name }: style_menu) {
  const ContainerComponent = isButton ? 'button' : 'div';

  return (
    <ContainerComponent className={styles[`${name}`]}>
      <img
        src={`./img/${name}.png`}
        alt={name}
        className={styles[`${name}-img`]}
      />
    </ContainerComponent>
  );
}

export default HeaderProfileMenu;

 

 

 

recoil의 사용

저번 코드와 달리 props 드릴링을 막기 위해 recoil을 통해 전역적으로 관리해주었다.

import { markers } from 'services/mocks/marker';
import { useRecoilState } from 'recoil';
import { DataMarkerProps } from 'configs/interface/KakaoMapInterface';
import DeleteMarks from './DeleteMarks';
import styles from './HeaderCategory.module.scss';
import { markerState } from '../recoil/MakerAtom';

function HeaderCategory() {
  const [_, setMarkerState] = useRecoilState<DataMarkerProps[]>(markerState);

  return (
    <div>
      {markers.map((mark, index: number) => {
        return (
          <div
            key={`${mark.Positions[index].lat},${mark.Positions[index].lng}`}
            className={styles['category-container']}
          >
            <button
              className={styles['category-button']}
              type="button"
              onClick={() => DeleteMarks(mark.name, setMarkerState)}
            >
              <img
                src={`/img/${mark.name}.png`}
                alt="CategoryImage"
                className={styles['img-container']}
                key={mark.name}
              />
            </button>
            {mark.name}
          </div>
        );
      })}
    </div>
  );
}

export default HeaderCategory;

 

폴더 구조

나름 세분화를 시킨 모습..

 

파스칼 표기법에 따라 열심히 작명해 주었다.

처음에는 작명이 왜 중요한지 몰랐는데 협업 시에 꼭 지켜주어야 구성원들이 명확하게 알 수 있다는 것을 느꼈다.

 

파스칼 표기법이 궁금하다면..

https://velog.io/@mercurios0603/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%93%A4%EC%9D%98-%EC%95%BD%EC%86%8D-%EC%BD%94%EB%93%9C-%ED%91%9C%EA%B8%B0%EB%B2%95-%EC%B9%B4%EB%A9%9C-%ED%8C%8C%EC%8A%A4%EC%B9%BC

개발자들의 약속 : 코드 표기법 (카멜, 파스칼, 스네이크)

 

 

 

이전 카테고리별 마커 참고

https://be-senior-developer.tistory.com/61

[재활용 프로젝트][리액트] 카카오 api 분류별 마커 표시 컴포넌트화