13. 컴포넌트 패턴과 최적화 - 2

렌더 프로퍼티(Render Props) 패턴 소개

렌더 프로퍼티(Render Props) 패턴은 React에서 컴포넌트 간 코드 재사용을 위한 강력한 패턴 중 하나입니다. 이번 글에서는 렌더 프로퍼티 패턴의 개념과 활용 방법에 대해 알아보겠습니다.

렌더 프로퍼티란?

렌더 프로퍼티는 컴포넌트가 렌더링될 때 자식 컴포넌트에게 함수를 전달하는 패턴입니다. 이 함수는 자식 컴포넌트가 실행하고 자신의 결과를 부모 컴포넌트에게 반환합니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트의 동작을 제어하고 상태를 전달할 수 있습니다.

렌더 프로퍼티의 활용

import React from 'react';

// 렌더 프로퍼티를 활용한 컴포넌트
class Mouse extends React.Component {
  state = { x: 0, y: 0 };

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

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {/* 렌더 프로퍼티를 이용해 자식 컴포넌트에 상태 전달 */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

// 렌더 프로퍼티를 이용한 자식 컴포넌트
const Cat = ({ x, y }) => (
  <img src="/cat.png" alt="cat" style={{ position: 'absolute', left: x, top: y }} />
);

// 사용 예시
const App = () => (
  <div>
    <h1>Move the mouse around!</h1>
    {/* Mouse 컴포넌트에 렌더 프로퍼티를 전달하여 Cat 컴포넌트를 렌더링 */}
    <Mouse render={({ x, y }) => <Cat x={x} y={y} />} />
  </div>
);

장점

• 코드 재사용성: 렌더 프로퍼티를 통해 컴포넌트 로직을 여러 컴포넌트에서 재사용할 수 있습니다.
• 컴포넌트 간 추상화: 렌더 프로퍼티를 통해 부모 컴포넌트는 자식 컴포넌트의 동작을 추상화하여 제어할 수 있습니다.

주의할 점

• 렌더 프로퍼티 패턴을 사용할 때는 적절한 컴포넌트 구조를 설계하는 것이 중요합니다. 지나치게 중첩된 렌더 프로퍼티는 코드를 이해하기 어렵게 만들 수 있습니다.
• 렌더 프로퍼티 패턴은 컴포넌트 간의 결합도를 높일 수 있습니다. 이를 줄이기 위해 필요한 경우 컨테이너 컴포넌트를 활용하는 것이 좋습니다.

마무리

렌더 프로퍼티 패턴은 React 애플리케이션에서 컴포넌트 간 코드 재사용성을 높이고 추상화 수준을 조절하는 데 유용한 패턴입니다. 그러나 사용에 주의를 기울여야 하며, 필요한 경우 다른 패턴을 고려하는 것이 좋습니다.