[수정] react-router-dom v6 반영
리액트를 공부하면서 프로젝트의 파일 구조에 대한 고민이 참 많았다.
일단은, 리액트 공식 문서에 파일 구조 관련한 대략적인 내용이 있기는 하다. (공식 문서)
하지만 정말 대략적인 내용이고, 아래의 내용이 꽤 강조된 모습으로 쓰여져있다.
"이것에 대해 너무 많이 고민하지 말고 일단 코딩하면서 너만의 방법을 찾아라"
공식 문서의 말씀처럼 여러 레퍼런스들을 참고하면서 나만의 구조를 찾는게 좋을 것 같다.
(여러 레퍼런스)
https://velog.io/@_junukim/나만의-리액트-프로젝트-설계하기-3tk5rs8r52
https://ichi.pro/ko/react-aeb-ui-poldeo-gujo-ihaehagi-217751249029174
(쪼갤때로 쪼긴다는 '아토믹 디자인' 이라는게 있는데 나중에 공부해보겠다.)
https://ui.toast.com/weekly-pick/ko_20200213
파일들을 생성하기 전에 scr 디렉토리안에 폴더들을 생성한다.
기본 리액트 프로젝트에 필요한 파일들을 생성한다 (디렉토리만 있으면 헷갈리니까 임시 파일들을 생성하는것!)
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;
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;
export interface ISample {
string: string;
number: number;
boolean: boolean;
}
declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.svg' {
const content: any;
export default content;
}
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;
}
`;
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;
앞으로도 공부하다가 추가할거 추가하고 뺄거 뺄거다.
철저히 내 방식대로 만들었다. 사람마다 스타일이 다르기에 참고만 하면 좋겠다.