pages 파일 구조 리팩터링

[junglesub]

@i4song 최근 페이지를 폴더화 하면서 pages/*PageName*/index.tsx 방식으로 파일 이름을 정하는 것을 볼 수 있습니다. 페이지 라우트를 폴더화 시키는 것은 좋지만 index.tsx에 대부분의 코드를 몰빵하다보니 자연스럽게 참고하기 위해 index.tsx을 열어두지만 다른 파일의 index.tsx와 이름이 겹쳐 조금 햇갈리는 부분이 있는 것 같습니다. (VSCode 에서 같은 파일이 열리면 옆에 폴더를 알려주긴 하지만 파일 하나만 열어뒀을 때 실수를 할 수 있으며 폴더가 나오더라도 약간 헷갈리는 것 같습니다.)

https://legacy.reactjs.org/docs/faq-structure.html

관련 문서를 확인해보니 여기에서 정확하게 알기는 어렵지만 index.tsx 에서는 최소한의 코드만 두고 나머지 컴포넌트 내용은 따로 jsx 파일을 만드는 것 같습니다.

저희도 이를 반영해서 파일구조를 조금 수정해보는 것은 어떨까요?

[o-bard-o]

저도 코드를 짜다가 공감이 돼서 지금 index에는 스타일을 제외한 모든 코드를 옮기는 리팩터링을 하고 있었습니다.

import ResultBox from "./ResultBox";
import SearchBox from "../../components/SearchBox";
import { useAppSelect } from "../../redux/configStore.hooks";

const Main = () => {
  const { isSearchCompleted } = useAppSelect((state) => state.search);
  return (
    <div className="vbox pack ml(30) mr(30)">
      <div className="vbox w(370)">
        <span className="font(32) GmarketSans 900 c(#363636) dark-white">
          총 1,214개의
          <br /> 군인 할인점들이 있어요.
        </span>
        <span className="font(16) NanumGothic 900 c(#999999)">
          23.09.19 업데이트
        </span>
      </div>
      <div className="wrap w(370) mt(50) mb(50)">
        <span className="font(16) NanumGothic 900 c(#363636) dark-white mb(10)">
          어디서 찾아볼까요?
        </span>
        <SearchBox placeholder={"양구시외버스터미널"} />
        {isSearchCompleted && <ResultBox />}
      </div>
      <div className="vbox w(370) r(5) b(1/#D9D9D9) box-shadow(0/0/20/#000.1) pl(24) pt(14) pb(14)">
        <span className="font(14) 600 c(#363636) NanumGothic dark-white">
          할인점 추가하기
        </span>
        <span className="font(14) 600 c(#999999) NanumGothic ">
          군인 장병들에게 잊지 못할 경험을 선물하세요.
        </span>
      </div>
    </div>
  );
};

export default Main;

확실히 가면 갈수록 스타일 관련 코드은 중복이 적지만, 검색 박스같은 코드는 중복이 많이 발생하더라구요. 이런 식의 리팩터링은 말씀해주신 코드 구조에 대한 리팩터링보다 중복 제거를 위한 리팩터링이지만
이런 방향은 어떨까요?

[junglesub]

코드 중복을 방지하기 위해서 <SearchBox> <ResultBox> 을 한번 만들어두고 페이지마다 사용하신다는 말씀이신가요?

[o-bard-o]

그런 것 보다 index에는 레이아웃 스타일 관련 코드만 넣어주고, api 호출이 필요하거나 전역상태를 수정하는 코드를 분리하면 어떨까.. 하는 말이었어요.

예를 들어 위 코드에서

      <div className="vbox w(370)">
        <span className="font(32) GmarketSans 900 c(#363636) dark-white">
          총 1,214개의
          <br /> 군인 할인점들이 있어요.
        </span>
        <span className="font(16) NanumGothic 900 c(#999999)">
          23.09.19 업데이트
        </span>
      </div>

이 부분은 추후 api 호출을 받아서 수정하게 되면 컴포넌트로 분리하는 식으로요.

[o-bard-o]

Map page의 경우는 이런식으로 검색창과 필터 버튼이 있는 <Overlay />, 카카오맵 자체를 불러오는 <KakaoMap /> 을 분리해서 아래처럼 짰어요.

import { useSearchParams } from "react-router-dom";
import KakaoMap from "./KakaoMap";
import Overlay from "./Overlay";

const Map = () => {
  const [searchParams] = useSearchParams();
  const x = searchParams.get("x");
  const y = searchParams.get("y");

  return (
    <>
      <span className="z(2) fixed top(0)">
        <Overlay />
      </span>
      <div className="w(100dvw) h(100dvh)">
        <KakaoMap
          x={x ? Number(x) : 126.570667}
          y={y ? Number(y) : 33.450701}
        />
      </div>
    </>
  );
};

export default Map;

[junglesub]

아하 그렇군요! 알겠습니다!! 저도 팝업 overlay 를 따로 짜고 있었습니다.

7 UI 는 어느정도 마무리가 됐는데 이제 기능 적인 면을 추가해야하는데 같은 파일을 작업하면서 리팩터링으로 파일 이름이 변경되서 충돌 발생할 것 같은데 혹시 리팩터링 하신 것부터 PR 하고 진행하는게 어떨까요?