Render Props

Render Props는 react에서 컴포넌트 간 코드를 재사용하고 컴포넌트 간의 데이터를 공유하기 위한 패턴 중 하나이다. 이 패턴은 컴포넌트의 props로 전달된 함수를 사용하여 다른 컴포넌트에서 렌더링 로직을 구현할 수 있도록 돕는다.

render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용한다.

기본 구성

<UserData render={(user) => (
  <h1>Hello {user.name}</h1>
)}/>

Render Props 패턴을 사용하면 컴포넌트 내부에 있는 데이터나 상태를 다른 컴포넌트에게 전달할 수 있으며, 이를 통해 재사용성을 높일 수 있다. 이 패턴은 주로 컴포넌트 간의 컴포지션을 통해 코드를 구성하고 로직을 추상화하는 데 사용된다.

사용법

1. Render Props 함수 정의
   렌더링할 로직이 담긴 함수를 정의한다. 이 함수는 props를 인자로 받고 렌더링할 JSX를 반환한다. 여기서 중요한 것은 render 라는 props는 특정하게 예약된 props가 아닌 단지 지어진 이름이다. render 이외의 다른 props 이름을 주어도 된다.

2. 컴포넌트에서 Render Props 사용
   컴포넌트 내부에서 해당 함수를 컴포넌트의 render prop 으로 전달합니다. 이때, 전달하는 함수 내에서 필요한 데이터나 상태를 활용하여 렌더링 로직을 작성한다.

3. 다른 컴포넌트에서 Render Props 사용
   다른 컴포넌트에서 Render Props 패턴을 사용하는 컴포넌트를 인스턴스화하고, 전달된 함수를 호출하여 해당 함수의 반환 값을 렌더링한다.

다음 예제를 통해 render prop 사용법에 대해 알아보자.

// 전달받은 render props를 통해 값을 그려주는 자식 컴포넌트이다
const ChildComponent: FC<{ render: (data?: ReactNode) => ReactNode }> = ({ render }) => {

    return (
        <h3 style={{ color: 'green' }}>
            {render('velog')}
        </h3>
    );
};

// ChildComponent에 전달할 값을 함수로 전달해준다
const RenderPropsExample: FC = () => {

    return (
        <div>
            <ChildComponent render={(value) => <span> {value}님 안녕하세요! </span>} />
        </div>
    );
};

위의 예제에서 ChildComponent는 함수형 컴포넌트로 작성되었으며, render prop을 통해 전달받은 함수를 실행하고 반환된 JSX를 렌더링한다.

단점

• 콜백 함수 복잡성
  복잡한 컴포넌트 구조에서는 여러 개의 콜백 함수가 연쇄적으로 전달될 수 있으며, 이로 인해 컴포넌트의 중첩이 늘어나 코드를 이해하기 어려워질 수 있다.

• 렌더링 성능
  매 렌더링마다 새로운 함수가 생성될 수 있으므로, 컴포넌트가 불필요하게 리렌더링되거나 성능 문제가 발생할 수 있습니다. 최적화가 필요한 상황에서는 주의해야 한다.

• 콜백 지옥
  복잡한 로직을 다루는 경우, 콜백 함수들이 중첩되어 코드가 가독성이 떨어질 수 있다.

Render Props 패턴은 컴포넌트 간 데이터 전달과 코드 재사용성을 향상시키는 강력한 패턴이지만, 사용 시 위와 같이 주의해야할 점이 있다. 특히 중첩된 구조와 렌더링 성능에 대한 고려가 필요하다.