[REACT] 컴포넌트 분리와 재사용

컴포넌트 분리의 필요성

React 애플리케이션에서 컴포넌트를 하나의 파일에 모두 작성하면 코드가 길어지고, 특정 기능을 수정하거나 디버깅할 때 불편함이 커집니다. 

컴포넌트 분리의 이점

• 가독성 향상: 각 파일이 하나의 역할만 담당하므로 코드를 읽고 이해하기 쉬워집니다.
• 재사용 극대화: 동일한 컴포넌트를 여러 곳에서 활용할 수 있어 중복 코드를 줄입니다.
• 유지보수성 강화: 특정 컴포넌트 수정 시 다른 부분에 영향을 주지 않고 작업할 수 있습니다.

컴포넌트 분리와 모듈화의 기본단계

• 새 파일 생성: 각 컴포넌트를 별도의 JavaScript 파일을 생성합니다.
• 컴포넌트 내보내기: export 키워드를 사용해 컴포넌트를 외부에서 사용할 수 있도록 설정합니다.
• 컴포넌트 가졍괴: 필요한 파일에서 import를 통해 컴포넌트를 불러와 사용합니다.

Default Export와 Named Export의 차이점

Default Export

• 파일당 하나의 default export만 사용할 수 있습니다.
• 파일을 가져올 때 이름을 임의로 지정할 수 있습니다.
• 파일의 주요 컴포넌트를 내보낼 때 주로 사용됩니다.

// Button.js
export default function Button() {
  return <button>클릭하세요</button>;
}

// App.js
import CustomButton from './Button.js'; // 이름을 자유롭게 지정 가능

Named Export

• 한 파일에서 여러 컴포넌트나 함수를 내보낼 수 있으며, 가져올 때 동일한 이름을 사용해야 합니다.
• 여러 요소를 한 파일에 모아 관리할 수 있어 유틸리티 모듈에 유용합니다.

// Utils.js
export function sayHello() {
  console.log("안녕하세요!");
}

export function sayGoodbye() {
  console.log("안녕히 가세요!");
}

// App.js
import { sayHello, sayGoodbye } from './Utils.js'; // 정확한 이름으로 가져오기

예제

// 개별 포스트를 표시하는 PostCard 컴포넌트 (named export)
export function PostCard({ title, author, date }) {
  return (
    <div className="post-card">
      <h3>{title}</h3>
      <p>작성자: {author}</p>
      <p>작성일: {date}</p>
    </div>
  );
}

// 포스트 목록을 표시하는 PostList 컴포넌트 (default export)
export default function PostList() {
  return (
    <div className="post-list">
      <h1>최신 블로그 포스트</h1>
      <PostCard 
        title="React 모듈화의 모든 것" 
        author="김개발" 
        date="2025-03-04" 
      />
      <PostCard 
        title="JavaScript 최적화 팁" 
        author="이코딩" 
        date="2025-03-01" 
      />
      <PostCard 
        title="CSS Grid 완벽 가이드" 
        author="박디자인" 
        date="2025-02-28" 
      />
    </div>
  );
}

App.js

이제 App.js 파일에서 위에서 작성한 컴포넌트들을 가져와서 사용할 수 있습니다. default export로 내보낸 PostList는 원하는 이름으로 가져올 수 있으며, named export로 내보낸 PostCard는 반드시 동일한 이름으로 불러와야 합니다.

import PostList, { PostCard } from './BlogComponents.js';

export default function App() {
  return (
    <div>
      <h2>블로그 애플리케이션</h2>
      <PostList />
      {/* PostCard를 독립적으로 사용 */}
      <PostCard 
        title="특별 포스트: AI와 개발" 
        author="최혁신" 
        date="2025-03-05" 
      />
    </div>
  );
}