AI 요약관련 정보

• 파일 이름은 kebab case로 작성하고, 컴포넌트 이름은 Pascal case로 작성하는 것이 좋습니다. ➡️
• VS Code 확장 프로그램을 활용하여 컴포넌트 생성 속도를 높일 수 있습니다. 🚀
• 기본 내보내기(default export)를 사용하면 컴포넌트 가져오기(import)가 더 깔끔해집니다. ✨
• 함수 선언(function declaration)을 사용하면 린터(linter)가 컴포넌트 이름을 더 잘 인식할 수 있습니다. 🤔
• TypeScript에서 인터페이스(interface)를 사용하면 확장성이 좋고, 오류 메시지가 더 명확하며, 일반적으로 많이 사용됩니다. 💡
• Props가 3개 이하면 객체 구조 분해(object destructuring)를 사용하고, 3개 초과면 props 구문을 사용하는 것이 좋습니다. 🧮
• 컴포넌트 내부 로직은 커스텀 훅, useState, useRef, useEffect 순서로 배치하는 것이 좋습니다. 🎣
• 컴포넌트 상태에 의존적인 헬퍼 함수는 컴포넌트 파일 내부에, 그렇지 않은 함수는 유틸 파일 등에 분리합니다. 🛠️
• 로딩 상태를 처리하기 위해 early return을 사용할 수 있지만, 서버 컴포넌트에서는 Suspense Boundary를 고려해야 합니다. ⏳
• JSX를 깔끔하게 유지하기 위해 렌더링 로직을 미리 정의하고, 불필요한 div 사용을 줄이며, 일관된 스타일 시스템을 사용합니다. 🎨
• 컴포넌트가 너무 커지면 JSX 부분을 분리하여 하위 컴포넌트로 만들거나, 로직을 커스텀 훅으로 추출합니다. ✂️