폴더 구조 프론트엔드 프로젝트의 구성요소는 중요합니다. 프로젝트를 더 쉽게 개발하고 유지 관리할 수 있기 때문입니다. 특히 크거나 복잡한 구성 요소를 처리할 때 폴더를 구성하면 코드를 체계적으로 정리하고 쉽게 찾고 이해할 수 있습니다.
폴더 구조는 이렇습니다. 다양한 형식의 구성요소 다음을 사용하여 개발된 프로젝트에서 일반적으로 사용됩니다. Next.js 및 TypeScript:
Atomic Design은 구성 요소를 복잡성과 기능에 따라 구분하는 디자인 개념입니다. 원자, 분자, 유기체, 템플릿, 페이지의 5가지 레벨로 구분됩니다.
src/ └── components/ ├── atoms/ # Small, reusable elements (e.g., buttons, inputs) │ ├── Button.tsx │ ├── Input.tsx │ ├── Icon.tsx │ └── ... # Additional atoms │ ├── molecules/ # Combinations of atoms (e.g., form groups) │ ├── FormInput.tsx │ ├── NavLink.tsx │ └── ... # Additional molecules │ ├── organisms/ # Complex UI components (e.g., headers, cards) │ ├── Header.tsx │ ├── Card.tsx │ ├── Footer.tsx │ └── ... # Additional organisms │ ├── templates/ # Page templates (layouts with placeholders) │ ├── MainLayout.tsx │ ├── DashboardLayout.tsx │ └── ... # Additional templates │ └── pages/ # Page-specific components (used directly in pages) ├── HomePage.tsx ├── AboutPage.tsx └── ... # Additional page components
import React from 'react'; interface ButtonProps { label: string; onClick: () => void; type?: 'button' | 'submit' | 'reset'; disabled?: boolean; } const Button: React.FC<ButtonProps> = ({ label, onClick, type = 'button', disabled = false }) => ( <button type={type} onClick={onClick} disabled={disabled} className="btn"> {label} </button> ); export default Button;
import React from 'react'; import Input from '../atoms/Input'; import Label from '../atoms/Label'; interface FormInputProps { label: string; value: string; onChange: (value: string) => void; } const FormInput: React.FC<FormInputProps> = ({ label, value, onChange }) => ( <div className="form-input"> <Label text={label} /> <Input value={value} onChange={onChange} /> </div> ); export default FormInput;
import React from 'react'; import NavLink from '../molecules/NavLink'; import Logo from '../atoms/Logo'; const Header: React.FC = () => ( <header className="header"> <Logo /> <nav> <NavLink href="/" label="Home" /> <NavLink href="/about" label="About" /> <NavLink href="/contact" label="Contact" /> </nav> </header> ); export default Header;
기능이나 모듈별로 구성 요소를 분리하는 구조는 기능이 풍부한 프로젝트에서 널리 사용됩니다. 기능을 효율적으로 관리하고 확장하는 데 도움이 됩니다
src/ └── components/ ├── authentication/ # Components related to authentication │ ├── Login.tsx │ ├── Signup.tsx │ └── PasswordReset.tsx │ ├── dashboard/ # Components specific to the dashboard │ ├── DashboardHeader.tsx │ ├── DashboardSidebar.tsx │ └── StatsCard.tsx │ ├── userProfile/ # Components for user profile │ ├── ProfileHeader.tsx │ ├── EditProfileForm.tsx │ └── Avatar.tsx │ ├── shared/ # Shared or common components across features │ ├── Button.tsx │ ├── Modal.tsx │ └── ... # Additional shared components │ └── layout/ # Layout components ├── Header.tsx ├── Footer.tsx └── Sidebar.tsx
import React, { useState } from 'react'; import Button from '../shared/Button'; import FormInput from '../shared/FormInput'; const Login: React.FC = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = () => { // Logic for login }; return ( <div className="login"> <h2>Login</h2> <FormInput label="Email" value={email} onChange={setEmail} /> <FormInput label="Password" value={password} onChange={setPassword} /> <Button label="Login" onClick={handleLogin} /> </div> ); }; export default Login;
import React from 'react'; interface StatsCardProps { title: string; value: number; icon: React.ReactNode; } const StatsCard: React.FC<StatsCardProps> = ({ title, value, icon }) => ( <div className="stats-card"> <div className="stats-card-icon">{icon}</div> <div className="stats-card-info"> <h3>{title}</h3> <p>{value}</p> </div> </div> ); export default StatsCard;
이 구조는 프로젝트의 도메인이나 제한된 컨텍스트에 따라 구성 요소를 구성하는 데 중점을 둡니다. 따라서 이 구조는 명확한 도메인 분리가 필요한 복잡한 시스템에 적합합니다
src/ └── components/ ├── domain/ │ ├── product/ # Components related to product domain │ │ ├── ProductCard.tsx │ │ ├── ProductList.tsx │ │ └── ProductDetail.tsx │ │ │ ├── cart/ # Components for cart domain │ │ ├── CartItem.tsx │ │ ├── CartSummary.tsx │ │ └── CartIcon.tsx │ │ │ ├── user/ # Components for user domain │ │ ├── UserAvatar.tsx │ │ ├── UserProfile.tsx │ │ └── UserSettings.tsx │ │ │ └── ... # Additional domain-specific components │ ├── ui/ # UI elements (atoms, molecules, etc.) │ ├── atoms/ │ ├── molecules/ │ └── organisms/ │ └── layout/ # Layout components ├── Header.tsx ├── Footer.tsx └── Sidebar.tsx
import React from 'react'; interface ProductCardProps { name: string; price: number; imageUrl: string; onAddToCart: () => void; } const ProductCard: React.FC<ProductCardProps> = ({ name, price, imageUrl, onAddToCart }) => ( <div className="product-card"> <img src={imageUrl} alt={name} className="product-card-image" /> <div className="product-card-info"> <h3>{name}</h3> <p>${price.toFixed(2)}</p> <button onClick={onAddToCart}>Add to Cart</button> </div> </div> ); export default ProductCard;
import React from 'react'; interface CartSummaryProps { totalItems: number; totalPrice: number; } const CartSummary: React.FC<CartSummary Props> = ({ totalItems, totalPrice }) => ( <div className="cart-summary"> <h3>Cart Summary</h3> <p>Total Items: {totalItems}</p> <p>Total Price: ${totalPrice.toFixed(2)}</p> <button>Checkout</button> </div> ); export default CartSummary;
이 구조는 크로스 플랫폼 개발을 지원하도록 설계되었습니다. 컴포넌트 중심 개발(CDD) 메인 애플리케이션과 별도의 형식으로 컴포넌트를 개발하고 테스트할 수 있는 스토리북을 사용
src/ └── components/ ├── Button/ │ ├── Button.tsx # Component implementation │ ├── Button.stories.tsx # Storybook stories │ ├── Button.test.tsx # Unit tests │ └── Button.module.css # Component-specific styles │ ├── Input/ │ ├── Input.tsx │ ├── Input.stories.tsx │ ├── Input.test.tsx │ └── Input.module.css │ ├── Modal/ │ ├── Modal.tsx │ ├── Modal.stories.tsx │ ├── Modal.test.tsx │ └── Modal.module.css │ └── ... # Additional component folders
import React from 'react'; import styles from './Button.module.css'; interface ButtonProps { label: string; onClick: () => void; variant?: 'primary' | 'secondary'; } const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => ( <button className={`${styles.btn} ${styles[variant]}`} onClick={onClick}> {label} </button> ); export default Button;
import React from 'react'; import { Meta, Story } from '@storybook/react'; import Button, { ButtonProps } from './Button'; export default { title: 'Components/Button', component: Button, } as Meta; const Template: Story<ButtonProps> = (args) => <Button {...args} />; export const Primary = Template.bind({}); Primary.args = { label: 'Primary Button', onClick: () => console.log('Primary Button Clicked'), variant: 'primary', }; export const Secondary = Template.bind({}); Secondary.args = { label: 'Secondary Button', onClick: () => console.log('Secondary Button Clicked'), variant: 'secondary', };
여러 팀이 함께 작업하는 프로젝트에서 공통 구성 요소를 사용하는 구조를 만드는 것이 중요합니다. 이 구조는 프로젝트 전반에 걸쳐 재사용할 수 있는 구성 요소를 분리하는 것을 강조합니다
src/ └── components/ ├── shared/ # Shared components across the application │ ├── Button/ │ │ ├── Button.tsx │ │ └── Button.module.css │ │ │ ├── Modal/ │ │ ├── Modal.tsx │ │ └── Modal.module.css │ │ │ └── ... # Additional shared components │ ├── featureSpecific/ # Feature-specific components │ ├── UserProfile/ │ │ ├── ProfileHeader.tsx │ │ ├── ProfileDetails.tsx │ │ └── Avatar.tsx │ │ │ ├── ProductList/ │ │ ├── ProductCard.tsx │ │ └── ProductFilter.tsx │ │ │ └── ... # Additional feature-specific components │ └── layout/ # Layout components ├── Header.tsx ├── Footer.tsx └── Sidebar.tsx
import React from 'react'; import styles from './Modal.module.css'; interface ModalProps { title: string; isOpen: boolean; onClose: () => void; } const Modal: React.FC<ModalProps> = ({ title, isOpen, onClose, children }) => { if (!isOpen) return null; return ( <div className={styles.modalOverlay}> <div className={styles.modal}> <h2>{title}</h2> <button className={styles.closeButton} onClick={onClose}> × </button> <div className={styles.modalContent}>{children}</div> </div> </div> ); }; export default Modal;
import React from 'react'; interface ProfileHeaderProps { name: string; bio: string; avatarUrl: string; } const ProfileHeader: React.FC<ProfileHeaderProps> = ({ name, bio, avatarUrl }) => ( <div className="profile-header"> <img src={avatarUrl} alt={name} className="profile-avatar" /> <h1>{name}</h1> <p>{bio}</p> </div> ); export default ProfileHeader;
ด้วยข้อมูลและแนวทางเหล่านี้ หวังว่าคุณจะสามารถจัดโครงสร้างในโฟลเดอร์ components ของโปรเจคได้อย่างมีประสิทธิภาพและเหมาะสมกับความต้องการของโปรเจคของคุณ!
위 내용은 프런트엔드 프로젝트 구성요소 폴더 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!