좋아요! 컴포넌트에 대한 개념을 좀 더 깔끔하게 정리해볼게요.

Component

컴포넌트는 애플리케이션을 구성하는 독립적인 단위로, 재사용성과 관리의 용이성을 높이기 위해 사용됩니다. 다음은 컴포넌트에 대한 주요 개념과 사용법입니다.

컴포넌트의 필요성

• 가독성 향상: 코드가 길어지면 난독성이 심해지므로 파일 단위로 나누어 관리합니다.
• 재사용성: 여러 곳에서 재사용할 수 있는 독립적인 구성 요소를 만듭니다.
• 단순화: 복잡한 UI를 작은 단위로 나누어 다룰 수 있습니다.

컴포넌트 이름 규칙

• 대문자로 시작: 리액트에서는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하므로, 함수 이름은 항상 대문자로 시작해야 합니다.

컴포넌트 선언 시 주의 사항

• 재사용성 및 독립성: 각 컴포넌트는 독립적으로 작동해야 하며, 필요한 경우 쉽게 재사용할 수 있어야 합니다.
• 파일 구조: 한 개의 파일에는 가급적 하나의 컴포넌트를 넣습니다.

컴포넌트 사용법

1. 부모 컴포넌트

   • 컴포넌트를 사용할 때는 다음과 같이 import합니다.

   import ChildComponent from './ComponentPath';

2. 자식 컴포넌트

   • 자식 컴포넌트는 함수로 정의하고, export default로 내보냅니다.

   const ChildComponent = () => {
     return <div>내용</div>;
   };
   export default ChildComponent;

컴포넌트 안에 컴포넌트

• 하나의 컴포넌트 안에서 다른 컴포넌트를 사용할 수 있습니다.

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent />
    </div>
  );
};

컴포넌트 설계 원칙

• 독립적인 원자성: 컴포넌트는 독립적으로 작동해야 하며, 다른 곳에서도 사용할 수 있어야 합니다.
• 이벤트 처리: 이벤트를 가지지 않아도 되지만, 이벤트가 있을 경우 어디에 들어가든 작동해야 합니다.
• 파일 및 컴포넌트 이름: 파일 이름과 컴포넌트 이름은 파스칼 케이스(PascalCase)를 사용하며, 가능하면 동일하게 맞추는 것이 좋습니다.