재사용되는 컴포넌트 패턴매칭으로 구현하기

패턴 매칭을 하게 된 배경 :

크게 나누자면 두개의 페이지에 text를 제외하고 거의 모든 공통된 컴포넌트를 사용하고 있었다.

각 페이지마다 있는 navbar를 이용해 페이지 이동이 가능하고, 나는 nextjs 13환경에서 프로젝트를 진행하고 있었기 때문에 폴더를 생성하면 라우팅이 가능한 기능을 이용하는 것에 초점을 두고 있었다.

plan과 record로 page가 나뉘기 때문에 그 폴더 내에 plan/step1/page.tsx , plan/step2/page.tsx, .. etc 이렇게 만들 생각을 했었다.

그렇게 고민 중에 이렇게 페이지를 나눠서 하는 게 맞나? 라는 생각이 들었다. 분명 페이지를 굳이 더 많이 만들지 않고도 해결할 수 있는 방법이 있을 거라고 생각했고, 그게 바로 패턴 매칭이었다.

나는 페이지에서 공용으로 쓰이는 navbar를 이용해 이를 구현했다.

구현 과정

1. navbar는 모두 Link 태그를 이용하고 있고, Link 태그에 pathname과 query를 지정해 주었다.

navbar는 모두 Link 태그를 이용하고 있고, Link태그에 pathname과 query를 지정해 주었다. 
{stepArray.map(({ id, step, title }) => (
            <Link
              href={{
                pathname: `/travel/${registerState}`,
                query: {
                  stepId: id,
                },
              }}
              key={id}
            >
...
}

1. page.tsx에서 switch를 사용해 각 컴포넌트마다 query를 구분해주고, query에 따라 보여주는 컴포넌트를 구분했다.

참고로 navbar가 맨 첫페이지에는 들어가지 않기 때문에 나는 stepTemplete.tsx 파일을
하나 더 만들어 주었다.

// page.tsx

const TravelPlan = () => {
  const params = useSearchParams();
  const search = params.get('stepId');

  let StepComponent;

  if (search == '0') {
    StepComponent = <Step1Title config={travelPlanStep1config} />;
  } else {
    StepComponent = <TravelPlanTemplete search={search} />;
  }

  return <div>{StepComponent}</div>;
};

export default TravelPlan;

navbar 클릭시 지정된 query의 number에 따라 다른 컴포넌트를 보여줄 수 있다.

const TravelPlanTemplete = ({ search }) => {
  let StepComponent;

  switch (search) {
    case '1':
      StepComponent = <Step2When config={travelPlanStep2config} />;
      break;
    case '2':
      StepComponent = <Step3What config={travelPlanStep3config} />;
      break;
    case '3':
      StepComponent = <Step4How config={travelPlanStep4config} />;
      break;
  }
  return (
    <>
      <TravelLayout>{StepComponent}</TravelLayout>
    </>
  );
};

export default TravelPlanTemplete;

이렇게 구현하니 뒤로가기 기능도 잘 작동했다. 리액트에서 매번 searchparams를 이용시엔 뒤로가기 기능이 제대로 작동하지 않아 애를 먹었는데, next에서는 정상적으로 작동한다.

만약 패턴매칭이 없이 구현했다면 plan, travel 폴더에 4개의 폴더가 더 생성됐을 것이다.