React - 컴포넌트 추상화 리팩토링 패턴

Before
// 너무 많은 UI가 하나의 컴포넌트에 있음
function Profile() {
  return (
    <div>
      <h1>Se-hyun</h1>
      <p>프론트엔드 개발자</p>
      <button onClick={() => alert('Followed!')}>Follow</button>
    </div>
  );
}

🔹 After
function ProfileInfo({ name, role }) {
  return (
    <>
      <h1>{name}</h1>
      <p>{role}</p>
    </>
  );
}

function FollowButton() {
  return <button onClick={() => alert('Followed!')}>Follow</button>;
}

function Profile() {
  return (
    <div>
      <ProfileInfo name="Se-hyun" role="프론트엔드 개발자" />
      <FollowButton />
    </div>
  );
}