React & Typescript Setup (without CRA) - 4 (React 파일 구조)

Asher·2021년 10월 13일
1
post-thumbnail

[수정] react-router-dom v6 반영

React 파일 구조

리액트를 공부하면서 프로젝트의 파일 구조에 대한 고민이 참 많았다.
일단은, 리액트 공식 문서에 파일 구조 관련한 대략적인 내용이 있기는 하다. (공식 문서)


하지만 정말 대략적인 내용이고, 아래의 내용이 꽤 강조된 모습으로 쓰여져있다.

"이것에 대해 너무 많이 고민하지 말고 일단 코딩하면서 너만의 방법을 찾아라"

공식 문서의 말씀처럼 여러 레퍼런스들을 참고하면서 나만의 구조를 찾는게 좋을 것 같다.

(여러 레퍼런스)
https://velog.io/@_junukim/나만의-리액트-프로젝트-설계하기-3tk5rs8r52
https://ichi.pro/ko/react-aeb-ui-poldeo-gujo-ihaehagi-217751249029174

(쪼갤때로 쪼긴다는 '아토믹 디자인' 이라는게 있는데 나중에 공부해보겠다.)
https://ui.toast.com/weekly-pick/ko_20200213

1. 디렉토리 생성

파일들을 생성하기 전에 scr 디렉토리안에 폴더들을 생성한다.

  • Assets : 폰트, 이미지 등을 담는다.

  • Components : (재사용이 가능한) 컴포넌트들을 담는다.
    • Common : Buttton 등의 프로젝트 전반적으로 재사용 할 수 있는 컴포넌트
    • Contents : props를 받아서 어느정도 재사용 할 수 있는 컴포넌트

  • Pages : Router를 사용하여 이동할 큼지막한 컴포넌트

  • Store : 데이터와 데이터를 관리하는 파일들을 담는다.
    - Data : Redux 관련 store / Actions / Reducer 등
    - Type : 인터페이스나 이미지 파일을 처리하는 모듈 등

  • Styles : Style 관련 파일들은 담는다

2. 파일 생성

기본 리액트 프로젝트에 필요한 파일들을 생성한다 (디렉토리만 있으면 헷갈리니까 임시 파일들을 생성하는것!)

  • Home.tsx
import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 5rem;
`;

const Home = () => {
  return <Title>This is home component</Title>;
};

export default Home;

  • Routes.tsx
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home/Home';

const RoutesComponent = () => {
  return (
    <Routes>
      <Route path="/*" element={<Home />} />
    </Routes>
  );
};

export default RoutesComponent;

  • Interfaces.ts (파일 안에 내용이 없으면 에러가 발생해서 샘플을 넣어둔 것)
export interface ISample {
  string: string;
  number: number;
  boolean: boolean;
}

  • Types.d.ts (사용하고 싶은 파일 확장자가 있으면 추가)
declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.svg' {
  const content: any;
  export default content;
}

  • GlobalStyle.ts
import { createGlobalStyle } from 'styled-components';
import { reset } from 'styled-reset';

export default createGlobalStyle`
    ${reset}
    *, *::before, *::after{
        box-sizing: border-box;
    }
    html{
        font-size: 1vw;
    }
    a{
        color: inherit;
        text-decoration: none;
    }
    ul{
        list-style: none;
    }
`;

  • App.tsx
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import RoutesComponent from './Pages/Routes';
import Globalstyle from './Styles/Globalstyle';

function App(): JSX.Element {
  return (
    <>
      <Globalstyle />
      <Router>
        <RoutesComponent />
      </Router>
    </>
  );
}

export default App;

3. 결론

앞으로도 공부하다가 추가할거 추가하고 뺄거 뺄거다.
철저히 내 방식대로 만들었다. 사람마다 스타일이 다르기에 참고만 하면 좋겠다.


(Move to Github Repository)

profile
Frontend Developer

0개의 댓글