[Project/ReactTS] 재사용되는 게시판 레이아웃 내 컨텐츠를 페이지별로 다르게 나타내기⚒️

 

 

리뉴얼될 총학생회 사이트는 회칙, 공지, 청원 페이지 등의 게시판 글 목록을 같은 레이아웃으로 Infinite Scroll하여 나타낸다. 이 페이지들은 레이아웃은 같아도 목록을 구성하는 컨텐츠가 각각 다르기 때문에 이를 어떻게 구현할지 고민하게 되었다.

예전 같았으면 새로운 페이지를 작성할 때마다 기존 레이아웃의 코드를 복사 붙여넣기하여 몇몇 부분을 수정하였겠지만, 이번 프로젝트에서는 Atomic Pattern을 도입하기로 하여 개선해보기로 하였다!

또한 이전 총학생회 사이트에서는 페이지마다 중복되는 함수들(axios(),useState()...)이 많아 수정사항이 있으면 페이지별마다 모두 바꿔야 했던 게 불편해서 이 점을 꼭 고치고 싶었다.

그래서 이번에는 마음 먹고 새로운 페이지를 작성할 때 기존 레이아웃 안에 들어갈 컨텐츠와 기본 정보만 작성하면 레이아웃에 알아서 맞춰지도록 구현해보기로 하였다.

보다시피 레이아웃이 동일하다

 

  

레이아웃을 도입하기 전의 청원게시판 코드이다.

import Board from 'components/common/board';
import Text from 'components/ui/text';
import { API_PATH } from 'constant';
import { useInfiniteScroll } from 'hooks/useInfiniteScroll';
import React, { useEffect } from 'react';

interface IPetitionPost {
   id: string;
   title: string;
   // 생략
}

export default function PetitionBoard() {
   const { list, isLoading, bottom } = useInfiniteScroll<IPetitionPost>(
      CONSTANTS.SERVER_URL + API_PATH.POST.PETITON,
   );
   const [isEmpty, setIsEmpty] = React.useState(false);

   useEffect(() => {
      setIsEmpty(list && list.length === 0);
   }, [list]);

   return (
      <>
         <Board>
            {isEmpty ? (
               <Board.NoData />
            ) : (
               list?.map(({ id, status, title, agreeCount, expiresAt }) => (
                  <Board.Cell key={id}>
                     <Text length={4}>{status}</Text>
                     <Text length={4}>{title}</Text>
                     <Text length={4}>{agreeCount}</Text>
                     <Text length={4}>{expiresAt}</Text>
                  </Board.Cell>
               ))
            )}
            {!isLoading && !isEmpty && <div ref={bottom} />}
         </Board>
      </>
   );
}

 

 

 

각 게시판마다 필요한 정보 = API 주소, 글 목록을 구성하는 JSX Elements

 

레이아웃 적용 첫 번째 시도!

레이아웃 컴포넌트를 새로 만들고, 레이아웃 안을 pathname에 따라 다르게 나타내 보았다.

BoardLayout.tsx

import Board from 'components/common/board';
import Text from 'components/ui/text';
import { useInfiniteScroll } from 'hooks/useInfiniteScroll';
import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

interface IBoardList {
	// 중복되는 필드가 대부분이라 IBoardList로 통합하였다
    // 공통으로 사용되지 않는 필드는 Optional Properties로 처리하였다.
   id: string;
   ...
   status?: string;
   expiresAt?: string;
   agreeCount?: string;
   blinded: string;
}

export default function BoardLayout({ api }: { api: string }) {
   const { list, isLoading, bottom } = useInfiniteScroll<ICell>(api);
   const [isEmpty, setIsEmpty] = React.useState(false);
   const navigate = useNavigate();
   const location = useLocation();

   useEffect(() => {
      setIsEmpty(list && list.length === 0);
   }, [list]);

   return (
      <>
         <Board>
            {isEmpty ? (
               <Board.NoData />
            ) : (
               list?.map(({ id, status, title, createdAt, expiresAt }) => (
                  <Board.Cell
                     key={id}
                     onClick={() => {
                        navigate(`${id}`);
                     }}
                  >
                     {/* 공지 */}
                     {location.pathname === '/notice' && (
                        <>
                           <Text className='text-xl font-bold' length={4}>
                              {title}
                           </Text>
                           <Text className='text-gray-400' length={4}>
                              {createdAt.slice(0, 10).replaceAll('-', '.')}
                           </Text>
                        </>
                     )}

                     {/* 청원 */}
                     {location.pathname === '/petition' && (
                        <div className='flex justify-between leading-9 px-8'>
                           <Text length={4}>{status}</Text>
                           <Text length={4}>{title}</Text>
                           <Text length={4}>{expiresAt}</Text>
                        </div>
                     )}
                  </Board.Cell>
               ))
            )}
            {!isLoading && !isEmpty && <div ref={bottom} />}
         </Board>
      </>
   );
}

 

/petition/index.tsx (BoardLayout 활용)

import { API_PATH, CONSTANTS } from 'constant';
import BoardLayout from 'layouts/BoardLayout';
import React from 'react';

export default function PetitionBoard() {
   return <BoardLayout api={CONSTANTS.SERVER_URL + API_PATH.POST.PETITION} />;
}

이렇게 작성하면 레이아웃 활용시 api 주소만 넣으면 된다! 코드 라인 수를 많이 줄여서 뿌듯했다.

그런데 pathname을 통하여 지정하는 게 오히려 코드가 더 지저분해보인다는 느낌이 들었다.

페이지가 더 많아지면 코드 라인도 오히려 길어질 것이고..

역시나 코드 리뷰 결과, 도메인과 엮여있게 하는 것보다 외부에서 주입되도록 하는 것이 좋겠다는 피드백을 받게 되었다.

 

두 번째 시도!

외부 주입이라는 키워드를 통해 자식 컴포넌트로부터 부모 컴포넌트로의 전달을 떠올렸다.

즉, BoardLayout 컴포넌트에 JSX.Element를 전달하는 것이다.

레이아웃이라는 개념 때문에 {props.children} 밖에 떠오르지 않아 중간에 헤맸는데 다시 생각해보니 그냥 props를 통하여 컴포넌트만 전달하면 된다는 명료한 답이 나왔다.

그 다음 문제는 부모 컴포넌트(BoardLayout)에서 API Response를 받고 있으므로 이를 자식 컴포넌트에게 전달해야 하고, 자식 컴포넌트(PetitionBoard)는 목록 구성요소(JSX.Element)를 부모 컴포넌트 레이아웃 안에 나타내야 한다는 것이었다. 

이에 대한 해결책은 BoardLayout과 PetitionBoard에서 API Reponse와 JSX.Element를 서로 전달받을 수 있는 함수를 공유하는 것이다.

따라서 BoardLayout은 API Response를 매개변수로 받아 JSX.Element를 반환하는 함수를 prop으로 가져야 한다.

 

BoardLayout.tsx

// 생략

export interface IBoardList {
   id: string;
	// 생략
}

export default function BoardLayout({
   api,
   setCell,
}: {
   api: string;
   setCell: (data: IBoardList) => JSX.Element;
}) {
   const { list, isLoading, bottom } = useInfiniteScroll<IBoardList>(api);
   const [isEmpty, setIsEmpty] = React.useState(false);
   const navigate = useNavigate();

   useEffect(() => {
      !list && setIsEmpty(true);
   }, [list]);

   if (isEmpty) {
      return (
         <Board>
            <Board.NoData />
         </Board>
      );
   }

   return (
      <Board>
         {list?.map((data) => (
            <Board.Cell
               key={data.id}
               onClick={() => {
                  navigate(`${data.id}`);
               }}
            >
               {setCell(data)}
            </Board.Cell>
         ))}
         {!isLoading && !isEmpty && <div ref={bottom} />}
      </Board>
   );
}

/petition/index.tsx

import Text from 'components/ui/text';
import { API_PATH, CONSTANTS } from 'constant';
import BoardLayout, { IBoardList } from 'layouts/BoardLayout';
import React from 'react';

export default function PetitionBoard() {
   const cell = (data: IBoardList) => (
      <div className='flex justify-between leading-9 px-8'>
         <Text length={4}>{data.status}</Text>
         <Text length={4}>{data.title}</Text>
         <Text length={4}>{data.expiresAt}</Text>
      </div>
   ); 
   return <BoardLayout api={CONSTANTS.SERVER_URL + API_PATH.POST.PETITION} setCell={cell} />;
}

 

코드 줄이기 성공 !