React 프론트 구조 (Architecture)

React.js 사용한 src 기준 Front-end 개발 폴더 구조 및 페이지 구성

폴더 구조

1. 구조 ├── node_modules ├── public ├── src │ ├── _common │ ├── components │ ├── datafetch │ ├── pages │ ├── index.css │ ├── index.tsx ├── .gitignore ├── package.json └── README.md

src >

- _common: 공통으로 쓰는 소스, 유틸리티 함수, 리소스 폴더 ( ex assets,define,hook,utill )
- components: 공통으로 쓰는 React Components 폴더
- datafetch: HTTP 통신 API 호출 관련 로직 폴더
- elements: page 단위 하위 (자식) elements components 폴더
- pages: page 단위 components 폴더 React-Router에서 import
- index.css: 최상위 css (css 초기화 파일)
- index.tsx: 최상위 애플리케이션의 진입점

---

React Component 기본 구조 및 소스

1. 구조 (src > components & src > elements)

- 폴더명(page명).tsx 
- 폴더명(page명).scss

2. 기본 소스

import { FC, useState, ReactNode } from 'react' import './Namespaces.scss';

/** Props interfaces **/ interface NamespacesProps { }

const Namespaces:FC = () =>{

return (<div> </div>)

} export default Namespaces

---