react hooks의 등장으로 거의 대체된 render props 방식

Render Props는 리액트에서 컴포넌트 간에 코드 재사용을 쉽게 하기 위한 패턴이다.

 

주로 함수형 컴포넌트에서 사용되며, 컴포넌트의 props로 함수를 전달받아 렌더링 동작을 동적으로 정의할 수 있다.

 

 

Render Props 기본 예제

 

function DataFetcher({ render }) {
    const data = { name: 'Alice', age: 25 }; // 가상의 데이터
    return <div>{render(data)}</div>;
}

function App() {
    return (
        <DataFetcher
            render={(data) => <p>Name: {data.name}, Age: {data.age}</p>}
        />
    );
}

• DataFetcher 컴포넌트는 render라는 prop으로 함수를 받는다.
• 이 함수는 데이터를 렌더링할 방식을 정의한다.
• 결과적으로 렌더링 방식을 부모가 결정하게 된다.

 

Render Props를 사용하는 이유

• 코드 재사용성 증가
  • 동일한 컴포넌트를 다양한 방식으로 렌더링 가능
• 로직 분리
  • 데이터 처리나 비즈니스 로직은 재사용 가능하게 만들고, 렌더링은 사용자 정의 가능
• 복잡한 상태 관리
  • 애니메이션, 스크롤 동작, 상태 공유 등에 활용

 

Render Props 활용 사례

 

 

1. Mouse Tracker

마우스 위치를 추적하는 컴포넌트

function MouseTracker({ render }) {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    useEffect(() => {
        const handleMouseMove = (event) => {
            setPosition({ x: event.clientX, y: event.clientY });
        };
        window.addEventListener("mousemove", handleMouseMove);

        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
        };
    }, []);

    return <div>{render(position)}</div>;
}

function App() {
    return (
        <MouseTracker
            render={({ x, y }) => (
                <p>
                    Mouse Position: ({x}, {y})
                </p>
            )}
        />
    );
}

• MouseTracker 컴포넌트는 마우스 위치 데이터를 관리
• render 함수로 마우스 데이터를 표시하는 방식을 사용자 정의 가능

 

---

 

2. Form Validation

function FormValidation({ render }) {
    const [isValid, setIsValid] = React.useState(false);

    const validateForm = (value) => {
        setIsValid(value.length > 5);
    };

    return <div>{render(isValid, validateForm)}</div>;
}

function App() {
    return (
        <FormValidation
            render={(isValid, validateForm) => (
                <div>
                    <input
                        type="text"
                        onChange={(e) => validateForm(e.target.value)}
                    />
                    <p>{isValid ? "Valid!" : "Invalid!"}</p>
                </div>
            )}
        />
    );
}

• FormValidation 컴포넌트는 유효성 검사를 관리
• 렌더링 방식은 외부에서 정의

 

Render Props와 HOC 비교

 

Render Props는 고차 컴포넌트(HOC)와 비슷한 역할을 하지만, 코드 가독성과 구조화된 전달 방식에서 차이가 있다.

특징	Render Props	HOC
구현 방식	함수를 props로 전달	함수를 사용해 컴포넌트를 래핑
가독성	직관적이고 명시적	컴포넌트를 래핑하여, 중첩된 형태로 복잡해질 수 있음
조합성	부모가 다양한 방식으로 자식을 커스터마이즈 가능	HOC 자체가 특정 기능을 추가하는 데 초점
사용 사례	UI 커스터마이징, 상태 공유	인증, 권한 관리, 공통 로직 추가

 

Render Props의 한계

• JSX 중첩 문제
  • Render Props를 과도하게 사용하면, JSX 구조가 깊어져 가독성이 떨어질 수 있다.

• Hooks와의 충돌
  • useEffect, useState와 같은 React Hooks 도입 이후, Render Props 패턴의 사용 빈도가 줄어드는 추세

 

Hooks와 Render Props의 관계

 

 

React Hooks가 등장하면서, Render Props가 해결하려던 많은 문제(상태 관리, 재사용성)를 Hooks로 대체할 수 있게 되었다.

 

위 Mouse Tracker를 Hooks로 변환해보자.

function useMousePosition() {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    useEffect(() => {
        const handleMouseMove = (event) => {
            setPosition({ x: event.clientX, y: event.clientY });
        };
        window.addEventListener("mousemove", handleMouseMove);

        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
        };
    }, []);

    return position;
}

function App() {
    const { x, y } = useMousePosition();
    return <p>Mouse Position: ({x}, {y})</p>;
}