[React] React 개발자를 위한 필수 디자인 패턴

 

React 개발을 하다 보면 반복되는 문제들을 마주치게 됩니다. 이런 문제들을 효과적으로 해결하기 위해 개발자들은 여러 디자인 패턴을 만들어왔습니다. 이 블로그에서는 React 개발자라면 꼭 알아야 할 필수 디자인 패턴들을 소개하고, 각 패턴의 사용 시기와 방법에 대해 알아보겠습니다.

1. 컴포넌트 합성 (Component Composition)

컴포넌트 합성은 React의 핵심 개념 중 하나입니다. 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 방식입니다.

예시:

const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

const Card = ({ title, content }) => (
  <div className="card">
    <h2>{title}</h2>
    <p>{content}</p>
  </div>
);

const CardWithButton = ({ title, content, buttonText, onButtonClick }) => (
  <Card title={title} content={content}>
    <Button onClick={onButtonClick}>{buttonText}</Button>
  </Card>
);

이 패턴을 사용하면 코드의 재사용성이 높아지고, 각 컴포넌트의 역할이 명확해집니다.

2. 고차 컴포넌트 (Higher-Order Components, HOC)

고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. 주로 여러 컴포넌트에서 공통적으로 사용되는 로직을 재사용하기 위해 사용됩니다.

예시:

const withLoader = (WrappedComponent) => {
  return class extends React.Component {
    state = { isLoading: true };

    componentDidMount() {
      setTimeout(() => this.setState({ isLoading: false }), 2000);
    }

    render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent = () => <div>Hello, World!</div>;
const EnhancedComponent = withLoader(MyComponent);

이 패턴을 사용하면 로딩 상태 관리와 같은 공통 로직을 여러 컴포넌트에 쉽게 적용할 수 있습니다.

3. 렌더 프롭 (Render Props)

렌더 프롭 패턴은 컴포넌트의 렌더링 로직을 props로 전달하는 방식입니다. 이를 통해 컴포넌트 간에 값이나 행동을 공유할 수 있습니다.

예시:

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

const App = () => (
  <MouseTracker
    render={({ x, y }) => (
      <h1>The mouse position is ({x}, {y})</h1>
    )}
  />
);

이 패턴을 사용하면 컴포넌트의 내부 상태를 외부에서 유연하게 사용할 수 있습니다.

4. 커스텀 훅 (Custom Hooks)

훅은 React 16.8에서 도입된 기능으로, 함수 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해줍니다. 커스텀 훅을 만들어 로직을 재사용할 수 있습니다.

예시:

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

const ResponsiveComponent = () => {
  const { width, height } = useWindowSize();

  return <div>Window size: {width} x {height}</div>;
};

커스텀 훅을 사용하면 상태 관리 로직을 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.

5. 컨텍스트 API (Context API)

컨텍스트 API는 프롭스 드릴링(props drilling) 문제를 해결하기 위한 React의 내장 기능입니다. 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

예시:

const ThemeContext = React.createContext('light');

const App = () => (
  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>
);

const Toolbar = () => (
  <div>
    <ThemedButton />
  </div>
);

const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am styled by theme context!</button>;
};

이 패턴을 사용하면 전역적으로 사용되는 데이터(테마, 언어 설정 등)를 효과적으로 관리할 수 있습니다.

6. 컴포넌트 상태 초기화 패턴

컴포넌트의 초기 상태를 설정하는 패턴입니다. 특히 비동기 데이터를 다룰 때 유용합니다.

예시:

const useDataFetching = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

const DataDisplay = ({ url }) => {
  const { data, loading, error } = useDataFetching(url);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{JSON.stringify(data)}</div>;
};

이 패턴을 사용하면 데이터 로딩, 에러 처리, 성공 상태를 일관되게 관리할 수 있습니다.

---

이러한 디자인 패턴들은 React 애플리케이션을 더 효율적이고 유지보수하기 쉽게 만들어줍니다. 각 패턴은 특정 문제를 해결하기 위해 설계되었으므로, 상황에 맞는 적절한 패턴을 선택하는 것이 중요합니다.

 

예를 들어, 여러 컴포넌트에서 공통으로 사용되는 로직이 있다면 고차 컴포넌트나 커스텀 훅을 고려해볼 수 있습니다. 컴포넌트 트리 전체에 데이터를 전달해야 한다면 Context API가 좋은 선택일 것입니다.

 

이러한 패턴들을 잘 이해하고 적절히 활용한다면, 더 깔끔하고 유지보수가 쉬운 React 애플리케이션을 개발할 수 있을 것입니다. 하지만 패턴을 무조건적으로 적용하기보다는, 각 상황에 맞는 최적의 해결책을 선택하는 것이 중요합니다. 때로는 간단한 해결책이 가장 좋은 해결책일 수 있다는 점을 명심하세요.