[React] (리액트 공부하기 11) 컴포넌트 추출

컴포넌트 추출이란 복잡한 컴포넌트를 작은 컴포넌트로 나누어 코드의 가독성과 재사용성을 높이는 작업이다.

---

1. 컴포넌트 추출의 필요성

• 큰 컴포넌트를 그대로 유지하면 코드를 관리하기 어렵고, 재사용하기 힘들다.
• 특정 부분을 작은 컴포넌트로 분리하면:

1. 가독성이 좋아지고,
2. 재사용성이 높아지며,
3. 유지보수가 쉬워진다.

예시: 복잡한 Comment 컴포넌트

다음은 댓글(Comment)을 렌더링하는 컴포넌트이다:

function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <img className="avatar" src={props.author.avatarUrl} alt={props.author.name} />
        <div className="user-info-name">{props.author.name}</div>
      </div>
      <div className="comment-text">{props.text}</div>
      <div className="comment-data">{formatDate(props.date)}</div>
    </div>
  );
}

위 코드에서:
1. 유저 정보(이미지, 이름)을 담당하는 부분과,
2. 댓글 내용을 담당하는 부분을 각각 컴포넌트로 추출할 수 있다.

---

2. Avatar 컴포넌트 추출

• Avatar(프로필 이미지)부분을 독립적인 컴포넌트로 분리한다.

기존 코드:

<img className="avatar" src={props.author.avatarUrl} alt={props.author.name} />

추출된 Avatar 컴포넌트:

function Avatar(props) {
  return <img className="avatar" src={props.user.avatarUrl} alt={props.user.name} />; 
}

추출 이유:

• 프로필 이미지는 여러 곳에서 재사용될 가능성이 크다.
• 독립적으로 관리하면 유지보수하기 쉽다.

추출 후 적용:

function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <Avatar user={props.author} />
        <div className="user-info-name">{props.author.name}</div>
      </div>
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{formatDate(props.date)}</div>
    </div>
  );
}

---

3. UserInfo 컴포넌트 추출

• UserInfo(사용자 정보) 부분을 하나의 컴포넌트로 분리한다.

기존 코드:

<div className="user-info">
  <Avatar user={props.author} />
  <div className="user-info-name">{props.author.name}</div>
</div>

추출된 UserInfo 컴포넌트:

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-info-name">{props.user.name}</div> 
    </div>
  );
}

추출 이유:

• 사용자 정보를 하나의 단위로 분리하면 재사용 가능성이 높아진다.

추출 후 적용:

function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{formatDate(props.date)}</div>
    </div>
  );
}

---

4. 최종 정리

최종 코드 구조:

function Avatar(props) {
  return <img className="avatar" src={props.user.avatarUrl} alt={props.user.name} />;
}

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-info-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">{props.text}</div>
      <div className="comment-date">{formatDate(props.date)}</div>
    </div>
  );
}

---

5. 왜 컴포넌트를 추출해야 할까?

1. 가독성 향상:

• 하나의 컴포넌트가 너무 크면 읽기 어렵다.
• 작은 컴포넌트로 나누면 코드의 구조가 더 명확해진다.

2. 재사용성 증가:

• 추출된 컴포넌트는 다른 컴포넌트에서 재사용할 수 있다.
• 예: Avatar 컴포넌트는 댓글뿐 아니라 프로필 페이지 등에서도 사용할 수 있다.

3. 유지보수 용이:

• 코드가 분리되어 있으면 변경 사항이 한정된 부분에만 영향을 미친다.
• 예: Avatar 컴포넌트를 수정하면 댓글과 프로필 페이지 모두 수정된 이미지를 사용한다.

---

6. 추출 시 주의점

• 추출 기준:

1. 반복되는 코드가 있다면 추출
2. 특정 부분이 독립적인 역할을 한다면 추출

• 과도한 추출은 피해야 함:
• 너무 작게 나누면 오히려 관리가 어려워질 수 있음
• 기능 단위로 구분 하는 것이 좋음