컴포넌트 추출

컴포넌트 합성과는 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있다.

 

기능단위로 구분하는 것이 좋고, 재사용이 가능한 형태로 추출하는 것이 좋다.

 

컴포넌트 추출은 큰 컴포넌트를 작고 재사용 가능한 컴포넌트로 나누는 과정을 의미하며 이를 통해 가독성을 높이고 유지보수를 쉽게 할 수 있다.

 

큰 컴포넌트

function UserProfile() {
  const user = {
    name: "Alice",
    age: 28,
    bio: "안녕하세요! 저는 웹 개발자입니다.",
  };

  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <h2>{user.name}</h2>
      <p>나이: {user.age}</p>
      <p>소개: {user.bio}</p>
    </div>
  );
}

// 렌더링
ReactDOM.render(
  <UserProfile />,
  document.getElementById('root')
);

 

UserProfile컴포넌트는 사용자 정보를 표시한다. 하지만 이 컴포넌트는 여러 기능을 포함하고 있어 가독성이 떨어질 수 있다.

 

컴포넌트 추출

// UserName 컴포넌트
function UserName({ name }) {
  return <h2>{name}</h2>;
}

// UserAge 컴포넌트
function UserAge({ age }) {
  return <p>나이: {age}</p>;
}

// UserBio 컴포넌트
function UserBio({ bio }) {
  return <p>소개: {bio}</p>;
}

// 수정된 UserProfile 컴포넌트
function UserProfile() {
  const user = {
    name: "Alice",
    age: 28,
    bio: "안녕하세요! 저는 웹 개발자입니다.",
  };

  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <UserName name={user.name} />
      <UserAge age={user.age} />
      <UserBio bio={user.bio} />
    </div>
  );
}

// 렌더링
ReactDOM.render(
  <UserProfile />,
  document.getElementById('root')
);

 

UserProfile 컴포넌트는 세 개의 작은 컴포넌트(UserName, UserAge, UserBio)로 나누어짐

이렇게 추출된 컴포넌트들은 각각의 역할을 명확하게 다지며, 재사용이 가능하고 가독성이 높은 코드를 생성한다.

 

컴포넌트 추출의 장점

• 재사용성 : 추출된 컴포넌트들은 다른 곳에서도 쉽게 재사용할 수 있다.
• 가독성 향상 : 각 컴포넌트가 수행하는 역할이 명확해져 코드의 이해도가 높아진다.
• 유지보수 용이 : 각 컴포넌트 별도로 수정할 수 있어 코드 유지보수가 더 쉬워진다.