본문으로 건너뛰기

컴포넌트 소개와 좋은 컴포넌트 이름

컴포넌트란 무엇인가?​

컴포넌트는 React에서 UI를 구성하는 기본 단위입니다. 마치 레고 블록처럼, 컴포넌트를 조합하여 복잡한 사용자 인터페이스를 만들 수 있습니다. 컴포넌트는 재사용 가능하며, 독립적으로 동작하는 것이 특징입니다. React에서는 크게 두 가지 종류의 컴포넌트가 있습니다: 함수형 컴포넌트와 클래스형 컴포넌트. 현대의 React에서는 함수형 컴포넌트를 주로 사용합니다.

함수형 컴포넌트의 예시​

함수형 컴포넌트는 단순히 JavaScript 함수를 작성하여 만들 수 있습니다. 다음은 간단한 예제입니다:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위 예제에서 Welcome 컴포넌트는 name이라는 props를 받아서, Hello, {props.name}라는 텍스트를 출력합니다. 여기서 props는 컴포넌트에 전달되는 데이터를 의미합니다.

좋은 컴포넌트 이름 짓기​

컴포넌트 이름을 잘 짓는 것은 코드를 이해하고 유지보수하는 데 매우 중요합니다. 좋은 컴포넌트 이름을 짓기 위해 다음의 규칙을 따르는 것이 좋습니다:

  1. 의미 있는 이름: 컴포넌트의 역할과 목적을 명확하게 나타내야 합니다.
  2. 대문자로 시작: React는 컴포넌트가 대문자로 시작하는 이름을 가질 것을 권장합니다.
  3. 일관성 유지: 프로젝트 전반에 걸쳐 일관된 명명 규칙을 사용합니다.

예시: 좋은 컴포넌트 이름​

function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

이 예제에서 UserProfile이라는 이름은 컴포넌트가 사용자 프로필을 나타낸다는 것을 명확히 합니다. 이와 같은 명명 규칙을 따르면 코드를 읽는 사람에게 컴포넌트의 역할을 쉽게 전달할 수 있습니다.

컴포넌트의 재사용성​

컴포넌트는 여러 곳에서 재사용될 수 있어야 합니다. 이를 위해 컴포넌트는 하나의 역할만 수행하도록 설계하는 것이 좋습니다. 예를 들어, 사용자 프로필 컴포넌트는 프로필 정보를 보여주는 역할만 하고, 데이터를 가져오는 로직은 다른 곳에서 처리해야 합니다.

예시: 재사용 가능한 컴포넌트​

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

Button 컴포넌트는 클릭 이벤트와 버튼의 라벨을 props로 받아와 다양한 상황에서 사용할 수 있습니다.

컴포넌트 분리의 중요성​

큰 컴포넌트를 작은 컴포넌트로 분리하면 코드의 가독성과 유지보수성이 높아집니다. 또한, 작은 컴포넌트들은 더 쉽게 재사용될 수 있습니다.

예시: 컴포넌트 분리​

function UserCard(props) {
  return (
    <div>
      <Avatar url={props.user.avatarUrl} />
      <UserProfile name={props.user.name} bio={props.user.bio} />
    </div>
  );
}

function Avatar(props) {
  return <img src={props.url} alt="User Avatar" />;
}

function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

이 예제에서 UserCard 컴포넌트는 Avatar와 UserProfile 컴포넌트를 사용하여 사용자 카드를 구성합니다. 이렇게 분리하면 각 컴포넌트가 독립적으로 동작하고, 필요한 곳에서 재사용할 수 있습니다.

더 알아보기​

  • 함수형 컴포넌트: 함수형 컴포넌트의 장점과 사용법에 대해 더 알아보세요.
  • Props: 컴포넌트 간 데이터 전달 방식인 Props에 대해 자세히 알아보세요.
  • 컴포넌트 재사용성: 재사용 가능한 컴포넌트를 설계하는 방법에 대해 더 알아보세요.

내용 요약과 다음 주제​

이 글에서는 컴포넌트의 기본 개념과 좋은 컴포넌트 이름 짓기의 중요성, 컴포넌트의 재사용성과 분리의 중요성에 대해 설명했습니다. 다음 주제인 Self-Closing Tags 사용법에서는 React 컴포넌트에서 Self-Closing 태그를 사용하는 방법에 대해 알아보겠습니다.