개발이야기

React 고급 기술 익히기 - 3편: 컴포넌트 구조 설계와 재사용성 극대화

diarmay 2025. 1. 24. 11:33

안녕하세요! "React 고급 기술 익히기" 시리즈의 세 번째 글입니다. 지난 2편에서는 상태 관리와 관련된 최적화 방법과 라이브러리 선택 가이드를 다뤘습니다. 오늘은 React 애플리케이션의 컴포넌트 구조 설계와 재사용성을 극대화하는 방법을 알아보겠습니다.

1. 컴포넌트 설계의 기본 원칙

React는 컴포넌트 기반 개발을 중심으로 설계되었습니다. 따라서 올바른 컴포넌트 구조를 설계하는 것은 프로젝트의 유지보수성과 확장성을 높이는 데 매우 중요합니다. 다음은 기본 원칙입니다.

(1) 단일 책임 원칙(Single Responsibility Principle)

  • 하나의 컴포넌트는 단 하나의 역할만 수행해야 합니다.
  • 역할이 명확하지 않거나 여러 책임을 가진 컴포넌트는 더 작은 컴포넌트로 나누는 것이 좋습니다.

(2) 재사용 가능한 컴포넌트

  • 특정 기능이나 스타일에 종속되지 않은 범용적인 컴포넌트를 설계하세요.
  • 재사용 가능성을 높이기 위해 props를 통해 동작과 스타일을 제어합니다.

(3) 관심사의 분리

  • UI와 비즈니스 로직을 분리하여 유지보수성을 높입니다.
  • 이를 위해 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 패턴을 활용할 수 있습니다.

2. 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트

프레젠테이셔널 컴포넌트

  • UI를 렌더링하는 데 집중하며, 상태 관리나 비즈니스 로직을 포함하지 않습니다.
  • Props를 통해 데이터를 전달받아 화면에 출력합니다.

컨테이너 컴포넌트

  • 상태 관리와 비즈니스 로직을 담당하며, 프레젠테이셔널 컴포넌트를 감싸는 형태로 사용됩니다.

예제:

// 프레젠테이셔널 컴포넌트
function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}

// 컨테이너 컴포넌트
import { useState } from 'react';

function UserContainer() {
  const [user, setUser] = useState({ name: 'Alice', age: 25 });

  return <UserCard name={user.name} age={user.age} />;
}

3. 컴포넌트 재사용성을 높이는 기법

(1) Props를 활용한 동적 렌더링

Props를 통해 컴포넌트의 동작을 제어하면 다양한 상황에서 재사용이 가능합니다.

예제:

function Button({ label, onClick, style }) {
  return (
    <button onClick={onClick} style={style}>
      {label}
    </button>
  );
}

// 사용
<Button label="Submit" onClick={() => alert('Submitted!')} style={{ color: 'white', backgroundColor: 'blue' }} />
<Button label="Cancel" onClick={() => alert('Cancelled!')} style={{ color: 'black', backgroundColor: 'gray' }} />

(2) 컴포넌트 합성

React의 children을 활용하여 컴포넌트를 조합할 수 있습니다.

예제:

function Card({ children }) {
  return <div style={{ border: '1px solid #ddd', padding: '10px', borderRadius: '5px' }}>{children}</div>;
}

// 사용
<Card>
  <h3>Title</h3>
  <p>This is the content of the card.</p>
</Card>

(3) 고차 컴포넌트(Higher-Order Component, HOC)

HOC는 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하는 함수입니다. 이를 통해 공통 로직을 추출하고 재사용할 수 있습니다.

예제:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

const HelloWorldWithLogging = withLogging(HelloWorld);

// 사용
<HelloWorldWithLogging />;

(4) 커스텀 훅(Custom Hook)

React의 훅을 기반으로 재사용 가능한 로직을 캡슐화하여 다양한 컴포넌트에서 활용할 수 있습니다.

예제:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 사용
function UsersList() {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

 

4. 컴포넌트 설계와 디렉토리 구조

프로젝트가 커질수록 컴포넌트와 관련된 파일을 정리하는 것이 중요합니다. 아래는 추천하는 디렉토리 구조입니다.

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   ├── Button.test.js
│   │   └── Button.css
│   ├── Card/
│   │   ├── Card.js
│   │   ├── Card.test.js
│   │   └── Card.css
├── hooks/
│   ├── useFetch.js
├── pages/
│   ├── HomePage.js
│   ├── AboutPage.js
└── App.js

5. 컴포넌트 설계 시 주의사항

  1. 복잡한 컴포넌트는 쪼개라:
    • 하나의 컴포넌트가 너무 많은 역할을 한다면, 더 작은 컴포넌트로 나누는 것이 좋습니다.
  2. 하드코딩 대신 유연성을 유지하라:
    • 데이터를 하드코딩하지 말고, props와 상태를 통해 동적으로 처리하세요.
  3. 성능을 고려하라:
    • 불필요한 렌더링을 방지하기 위해 React.memo, useCallback 등을 적극 활용하세요.
  4. 일관성을 유지하라:
    • 컴포넌트 이름, props, 디렉토리 구조 등에 일관된 규칙을 적용하세요.

결론

컴포넌트 구조 설계와 재사용성은 React 애플리케이션의 확장성과 유지보수성을 좌우하는 중요한 요소입니다. 단일 책임 원칙을 지키고, 재사용 가능한 패턴(Props, 합성, HOC, 커스텀 훅 등)을 활용하여 효율적인 컴포넌트를 설계해보세요.

다음 4편에서는 **React의 성능 최적화를 위한 코드 스플리팅과 서버 사이드 렌더링(SSR)**에 대해 이야기해보겠습니다. 관심 있는 분들은 구독하고 계속 따라와 주세요! 😊

 

728x90
반응형