AI 요약관련 정보

• 애플리케이션 규모가 커질수록 모든 컴포넌트를 한 파일에 두는 것은 비효율적이므로, 각 컴포넌트를 별도의 파일로 분리하여 관리하는 것이 중요합니다. 🧩
• 컴포넌트 파일은 소스 폴더 내에 .jsx 확장자로 생성하며, 파일명은 PascalCase (예: Welcome.jsx)를 따르는 것이 일반적인 관례입니다. 📁
• 컴포넌트를 다른 파일로 옮긴 후에는 해당 컴포넌트를 사용하려는 파일에서 참조할 수 있도록 JavaScript 모듈 시스템의 내보내기(export) 및 가져오기(import) 기능을 활용해야 합니다. ✂️
• 컴포넌트가 정의된 파일에서는 export default ComponentName; 또는 export const ComponentName = () => {}; 구문을 사용하여 컴포넌트를 외부로 내보냅니다. 📤
• 컴포넌트를 사용하려는 파일에서는 import ComponentName from './path/to/Component'; (기본 내보내기) 또는 import { ComponentName } from './path/to/Component'; (이름 있는 내보내기) 구문을 사용하여 가져옵니다. 📥
• React 컴포넌트는 const ComponentName = () => { ... };와 같은 화살표 함수 형태로 정의하는 것이 현대 React 코드에서 널리 사용되는 패턴입니다. ➡️
• 기본 내보내기(export default)는 가져올 때 이름을 임의로 변경할 수 있어 혼동을 줄 수 있지만, 이름 있는 내보내기(export const)는 가져올 때 중괄호 {}를 사용하며 이름 변경이 불가능하여 디버깅 및 유지보수에 더 유리합니다. ✅
• 컴포넌트를 개별 파일로 모듈화하면 코드의 유지보수성이 크게 향상되고, 컴포넌트를 쉽게 찾고 업데이트할 수 있으며, 애플리케이션 전반에 걸쳐 재사용하기 용이해집니다. ♻️
• JavaScript 파일 내에 작성된 HTML과 유사한 코드는 실제 HTML이 아닌 React의 핵심 기능 중 하나인 JSX이며, 이는 다음 학습 주제입니다. ⚛️