[재한] 사회에 발딛은 콜럼버스 코드

[Wisesaturn]

개요

이번엔 인턴 생활에서 작성한 첫 코드 중 일부분을 가져와봤습니다.
역시 이전 코드를 끄집어 내는 건 정말 어렵군요 😂
요새 하는 고민은 어떻게 컴포넌트 구조를 야무지게 짤까를 정말 많이 고민하고 있습니다.
이러한 고민을 저의 구닥다리 코드와 함께 고민해봅시다.
불과 8개월 전에 짠 코드인데 정말 많이 더럽습니다. (컴포넌트 설계가 아직 미숙했달까)

여러분들이 봐주실 포인트는 요렇습니다!

1. 어떻게 깔끔하게 정리할 수 있을까
2. 어느 부분에서 추상화가 들어가면 좋을까

P.S) Next.js에서 짠 코드입니다

코드

export default function RestorePostBox({ examDetailIdx, keyword }: Props) {

... (생략) ...

  return (
    <div className={styles.postbox_container}>
      <div className={styles.menu_box}>
        <div className={styles.menu_box_category}>
          <CategoryDefaultButton isTurnOn={tagIds.length === 0} onClick={handleAllCategory}>
            전체
          </CategoryDefaultButton>
          {examInfo.examDetailTags.map((item, idx) => (
            <CategoryButton key={idx} index={item.id} categories={tagIds} onClick={() => handleCategory(item.id)}>
              {item.name}
            </CategoryButton>
          ))}
        </div>
        <Dropdown
          options={dropDownOptions}
          value={examSubjectId}
          onchange={(e: React.ChangeEvent<HTMLSelectElement>) => setExamSubjectId(e.target.value)}
        />
        {/* 임시용 버튼 (문제 검색용 파일) */}
        {examInfo.examDetailAttachment.id !== null && (
          <button
            type="button"
            onClick={() =>
              downloadFile({
                fetchUrl: `${process.env.NEXT_PUBLIC_API_URL}V2/attachments/${examInfo.examDetailAttachment.id}`,
                fileName: `문제 검색용 파일_${examInfo.examDetailName}`,
                type: `${examInfo.examDetailAttachment.type}`,
              })
            }
            className={styles.menu_box_category_fileDownloadBtn}
          >
            <Image src={'/assets/icons/download_icon.svg'} alt={'문제 검색용 아이콘'} width={22} height={22} />
            문제 검색용 파일
          </button>
        )}
        {/* 임시용 버튼 (문제 검색용 파일) */}
      </div>
      <div className={styles.post_box}>
        {posts.length > 0 && (
          <>
            {posts.map((post) => (
              <Link key={post.id} href={`/restore/${examDetailIdx}/post/${post.id}`}>
                <PostBox post={post} />
              </Link>
            ))}
            <Pagination totalPage={totalPage} currentPage={page} onChangePage={handleChangePage} />
          </>
        )}
        {posts.length === 0 && <RestorePostEmptyList message={'게시물이 존재하지 않습니다.'} />}
      </div>
    </div>
  );
}

사진

[regularPark]

패키지의 아버지 재한님, 안녕하시렵니까?🤗

바로 제 생각을 말씀드려보겠읍니다.

---

어떻게 깔끔하게 정리할 수 있을까

1. 익명함수를 개별 함수로 분리! onClick 내부에 익명함수들이 구조 파악을 어렵게 해요!
2. post 관련 div를 컴포넌트로 분리! Posts, PostList 같은 컴포넌트로 분리시켜 가독성과 관심사 분리를 동시에 잡아보는 것도 좋을 것 같습니다!

어느 부분에서 추상화가 들어가면 좋을까

1. 위에서 말씀드렸듯 관심사 분리가 들어가면서 카테고리, 검색, 게시글을 관심사를 기준으로 잡아 모듈화하여 사용하면 더 읽기 쉽고 관리하기도 쉬운 코드가 될 것 같습니다!

---

사실 요즘의 재한님에게서는 절대 나올 수 없는 코드네요. 8개월만의 프론트의 신이 되어버린 재한님,,,,그저 갓재한🫢

[qhahd78]

안녕하세요 재한님? 오늘도 즐거운 리뷰시간입니다. 바로 리뷰 갑니다.

1. Props 네이밍 변경

• Props 보다는 RestorePostBoxProps 와 같이 네이밍을 하면 좋지 않을까요?

2. downlodaFile 함수 변경

• fetchUrl 을 제거하고, 변수인 id 값만 넘겨주면 좋을 것 같습니다.
• 그리고 함수를 직접 쓰니 가독성이 떨어져보여요 ! 따로 함수로 빼도 괜찮을 것 같습니다.

const onClickDownloadFile = (id, fileName, type) => {
 downloadFile(id, fileName, type)
}

---- 생략 ---- 
onClick={
  onClickDownloadFile(
  examInfo.examDetailAttachment.id, 
  `문제 검색용 파일_${examInfo.examDetailName}`, 
  `${examInfo.examDetailAttachment.type}`)
}

---

역시 과거의 재한님도 똑똑이셨군요.. 가독성이나 네이밍 말고는 리뷰할 게 없는 멋진 코드!

[KyuTae98]

'어떻게 추상화를 해야 할까'
이 부분을 프로젝트를 하면서 매번 고민하지만 정확하게 결론을 내기가 어렵네요,,,

저는 주로 중복되는 코드를 중심으로 컴포넌트를 만들고 있습니다.

또, 도메인 별로 컴포넌트를 나누면 컴포넌트명으로도 어떤 역할을 하는지 알 수 있어 좋다고 생각합니다!

재한님이 주석으로 나눠 주신 것처럼 post와 button을 컴포넌트로 만들어 어떤 역할을 하는지 분명하게 알 수 있다고 생각해요!

[bbearcookie]

안녕하세요 재한님! 😊
역시 8개월 전의 재한님도 깔끔하게 코드를 작성하셨군요..

도메인 맥락 분리

저는 CategoryDefaultButton, CategoryButton 등의 컴포넌트에서 도메인 맥락을 분리하고, 순수한 UI 기능을 분리하여 다른 곳에서도 재활용할 수 있는 컴포넌트를 만들 수 있지 않을까 싶은 생각이 들었어요!

(이미지를 보면서 추측하건데, 현재 선택된 요소에 따라 다른 컨텐츠를 보여주는 Tab 혹은 현재 활성화 된 상태에 따라 컨텐츠에 active 효과를 줘야 하는 NavLink와 유사한 기능이 포함되어있는 것 같아요!)

PostList 분리

PostList에 대한 Empty State UI와 컨텐츠를 하나의 컴포넌트로 묶어서 관리할 수도 있지 않을까 싶네요!
이 경우에는 게시글 목록을 가져오는 훅을 따로 지역적으로 관리해서 리렌더링을 지역적으로 유발하도록 하거나 Suspense로 래핑하여 로딩을 지역적으로 관리하는 등이 용이해질 것 같다는 생각이 들었어요 😊

      <div className={styles.post_box}>
        {posts.length > 0 && (
          <>
            {posts.map((post) => (
              <Link key={post.id} href={`/restore/${examDetailIdx}/post/${post.id}`}>
                <PostBox post={post} />
              </Link>
            ))}
            <Pagination totalPage={totalPage} currentPage={page} onChangePage={handleChangePage} />
          </>
        )}
        {posts.length === 0 && <RestorePostEmptyList message={'게시물이 존재하지 않습니다.'} />}
      </div>