개요

제멋대로 import된 외부 패키지, 내부 컴포넌트, 내부 파일들을 정리해보자.

내 나름의 기준을 세워본 결과, 다음과 같은 방식으로 정리하기로 하였다.

리액트 제공 패키지

react 관련 - { useState, useCallback }

react-router-dom 관련 - { useNavigate }

개행 - 외부 패키지 끝

내부 패키지

내부 모듈 - 전역관리(ContextAPI, useReducer) - App

내부 모듈 - Utils

내부 모듈 - Network

외부 패키지

import dayjs from 'dayjs';

개행 - 내부 패키지 끝

내부 컴포넌트

Page - 컴포넌트

Components 디렉토리 컴포넌트

자식 컴포넌트

디자인 관련 프레임워크 - bootstrap, mui

컴포넌트 - @mui/material

아이콘- @mui/icons

개행 - 컴포넌트 끝

내부 모듈 - Styled - Global.styled

내부 모듈 - 컴포넌트.styled

예제

Before

import { FavoriteBorder } from '@mui/icons-material';
import FavoriteIcon from '@mui/icons-material/Favorite';
import { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';

import { getCategoryById } from 'Utils';

import ArticleService from 'Network/ArticleService';
import { AuthContext } from 'App';
import GlobalStyled from 'Styled/Global.styled';
import dayjs from 'dayjs';
import Styled from '../ArticlePage.styled';
import ReactionService from 'Network/ReactionService';
import { getProfileImg } from 'Utils/profileList';
import { CommentContainer } from '.';

After

import { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';

import { AuthContext } from 'App';
import { getCategoryById } from 'Utils';
import { getProfileImg } from 'Utils/profileList';
import { ArticleService, ReactionService } from 'Network';
import dayjs from 'dayjs';

import { CommentContainer } from '.';
import { FavoriteBorder } from '@mui/icons-material';
import FavoriteIcon from '@mui/icons-material/Favorite';

import GlobalStyled from 'Styled/Global.styled';
import Styled from '../ArticlePage.styled';

훨씬 깔끔해졌다.