“render prop”란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다. Show render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용합니다.
render props를 사용하는 라이브러리는 React Router, Downshift, Formik이 있습니다. 이 문서에서는 render props가 왜 유용하고, 어떻게 여러분의 프로젝트에 적용할 수 있을지에 관해 이야기 하겠습니다. 횡단 관심사(Cross-Cutting Concerns)를 위한 render props 사용법컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않습니다. 예를 들면, 아래 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직입니다.
스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를
여기서 질문입니다. 다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까요? 즉, 다른 컴포넌트에서 커서(cursor) 위치에 대해 알아야 할 경우, 쉽게 공유할 수 있도록 캡슐화할 수 있습니까? React에서 컴포넌트는 코드 재사용의 기본 단위이므로, 우리가 필요로 하는 마우스 커서 트래킹 행위를
이제 예를 들어, 마우스 주위에 고양이 그림을 보여주는 첫 번째 방법으로는, 다음과 같이
이러한 접근 방법은 특정 사례에서는 적용할 수 있지만, 우리가 원하는 행위의 캡슐화(마우스 트래킹)라는 목표는 달성하지 못했습니다. 이제 우리는 다른 사용 예시에서도 언제든지 마우스 위치를 추적할 수 있는 새로운 component( 여기에 render prop를 사용할 수 있습니다.
이제 컴포넌트의 행위를 복제하기 위해 하드 코딩할 필요 없이 정리하자면, render prop은 무엇을 렌더링할지 컴포넌트에 알려주는 함수입니다. 이 테크닉은 행위(마우스 트래킹 같은)를 매우 쉽게 공유할 수 있도록 만들어 줍니다. 해당 행위를 적용하려면, render props에 대해 한가지 흥미로운 점은 대부분의
higher-order components(HOC)에 render props pattern을 이식할 수 있습니다. 예를 들면,
따라서 render props를 사용하면 두 가지 패턴 모두 사용이 가능합니다. render 이외의 Props 사용법여기서 중요하게 기억해야 할 것은, “render props pattern”으로 불리는 이유로 꼭 prop name으로 위 예시에서는
실제로 JSX element의 “어트리뷰트”목록에 하위 어트리뷰트 이름(예를들면 render)을 지정할 필요는 없습니다. 대신에, element 안에 직접 꽂아넣을 수 있습니다!
이 테크닉은 react-motion API에서 실제로 사용된 것을 볼 수 있습니다. 이 테크닉은 자주 사용되지 않기 때문에, API를 디자인할 때
주의사항React.PureComponent에서 render props pattern을 사용할 땐 주의해주세요.render props 패턴을 사용하면
위에서 사용했던
이 예시에서 이 문제를 해결하기 위해서, 다음과 같이 인스턴스 메서드를 사용해서 prop을 정의합니다.
prop을 정적으로 정의할 수 없는 경우에는 |