오늘 준혁님이 게스트로 퓨저블의 대표님을 초대해주시고 코드리뷰를 진행했다. 코드 리뷰를 받은 내용과 코드를 짜는 습관에 대해 정리해보겠다.

코드 리뷰

1. router.tsx 의 내용은 최대한 간단하게 짜는 것이 좋음.
2. lazy 기능 구현시 react-loadable 라이브러리 추천해주심.
3. 변하지 않는 함수일 경우 렌더링 최소화를 위해 useMemo를 사용할 것. (사실 엄청 큰 프로젝트가 아닌 이상 성능에 거의 차이는 없지만, 습관을 들이는 것이 좋다고 하심. 하지만 사람마다 다른 코드 취향일수도..)
4. 컴포넌트 리턴 부분에 삼항 연산자를 최대한 안쓰는 것이 좋다. 가독성이 좋지 않기 때문에. 가독성을 위해 최대한 코드나 파일을 나누는 것이 좋음
5. 프론트엔드 개발자는 수정을 최대한 빨리 할 수 있도록 코드를 짜야 한다. => 다른 사람들이 보았을 때 금방 코드가 읽히도록. 넘겨주는 props 최소화하기.(5개 미만으로..)
6. SEO 설정할 때 react-helmet 라이브러리 추천.
7. 라이브러리 사용시 개발할 때만 필요한 것은 dev로 설치하기.
8. useEffect 부분이 너무 길어지면 따로 빼기. 프론트엔드는 가독성이 최고이다.
9. 최대한 props명과 변수명 일치 시키기 => 코드 취향일 수 있으나 일치 시켜야 헷갈리지 않음.
10. return안에 depth가 깊어지지 않도록 신경쓰기
11. import 순서 지키기 => 이것 또한 가독성을 위해.
    보통 node modules package => type => utils or hooks => components => style 순으로 나열하신다고 하심.

🌟 전체적으로 가독성에 대한 이야기를 많이 해주신 것 같다.

내 프로젝트 코드리뷰...

프로젝트 repository

1. beautiful dnd 때문인지 return 부분 depth가 너무 깊어져 가독성이 좋지 않다. 따로 분리할 수 있는 것은 분리하는 것이 좋다.
2. 삼항 연산자 때문에 가독성이 좋지 않음..

refactoring

가독성이 좋지 않은 MovieMain.tsx return 부분의 파일을 분리해보았다.

리팩토링 전

return (
    <DragDropContext onDragEnd={() => {}}>
      <Container ref={parentObservedTarget}>
        <SearchBar setIsLoading={setIsLoading} />
        {movieList.Response === "True" ? (
          <ul>
            <TotalContainer>
              <AiOutlineUnorderedList size={20} />
              <MovieTotal>Total {movieList.totalResults}</MovieTotal>
            </TotalContainer>
            <Droppable droppableId="bookmarkLi" isDropDisabled>
              {(provided) => (
                <MovieListSubContainer ref={provided.innerRef}>
                  {movieList?.Search?.map((movie, i) => (
                    <MovieItem key={`${i}${movie.imdbID}`} item={movie} />
                  ))}
                  <div ref={setTarget}>{!isLoading && <Loading />}</div>
                  {provided.placeholder}
                </MovieListSubContainer>
              )}
            </Droppable>
          </ul>
        ) : (
          <NotFound error={movieList.Error} />
        )}
      </Container>
    </DragDropContext>
  );

리팩토링 후

최선의 방법인지는 모르겠다. 왜냐면 MovieList라는 컴포넌트를 새로 만들면서 props로 3개를 넘겨주었기 때문이다. 그래도 확실히 짧아져서 보기엔 간편한듯 하기도 하구..? 하지만 아직도 삼항 연산자를 사용하게 될 수 밖에 없다. 삼항 연산자를 안쓰고 어떻게 조건부 렌더링을 해야하지?

  return (
    <DragDropContext onDragEnd={() => {}}>
      <Container ref={parentObservedTarget}>
        <SearchBar setIsLoading={setIsLoading} />
        {movieList.Response === "True" ? (
          <MovieList movieList={movieList} setTarget={setTarget} isLoading={isLoading} />
        ) : (
          <NotFound error={movieList.Error} />
        )}
      </Container>
    </DragDropContext>
  );