이 디자인 패턴은 컴포넌트를 합성하는 패턴 중 하나다. 부모와 자식 컴포넌트를 유연하게 연결하고 싶을때 render props패턴을 사용하는데, 이 패턴은 render props패턴의 확장된 버전이다.
render props pattern
ON과 OFF두가지 상태를 갖는 토글을 구현해본적이 있을것이다. 토글의 기능은 유지한채로 컴포넌트의 형태를 변경하고 싶을때 위와 같이 코드를 작성할 수 있을 것 이다.
- Toggle 컴포넌트에서 render라는 이름의 props를 전달 받는다.
- render함수를 호출할때 자기가 갖고 있는 상태(isOn)와 헬퍼함수(toggle)을 전달하여 호출한다.
- App컴포넌트 내부에있는 Toggle컴포넌트의 render에 전달된 함수에 2번에서 전달된 props들이 들어오고 이곳에서 Toggle이 어떤형태로 렌더링 될지 정해주면 된다.
render가 어색하다면 아래 처럼 children을 사용하면 된다.
render든 children이든 어차피 props내부에 들어있는 값이다. 위와 같이 render props 패턴을 사용하면 좀 더 깔끔하게 컴포넌트를 합성 할 수 있다.
props collection pattern
이 패턴도 결국엔 render props패턴과 비슷하다. 그냥 Toggle 컴포넌트에서 전달할 props를 묶어 전달할 뿐이다. 우리가 작성한 <Toggle /> 컴포넌트가 라이브러리고 이 컴포넌트를 누군가가 가져다가 사용한다고 해보자.
Toggle 컴포넌트에는 아직 aria-expanded가 없기 때문에 이 부분은 Toggle을 가져다 사용하는 개발자가 직접 isOn값을 확인해서 추가해줘야하는 부분이다. 매번 이렇게 하면 번거로울것이다. 어떻게 하면 편하게 만들 수 있을까?
이렇게 해주면 된다.
toggler는 토글 버튼을 의미한다. 이렇게 토글 버튼에 전달할 props를 togglerProps라는 이름으로 묶어서 자식 컴포넌트에게 전달하면 Toggle 컴포넌트 라이브러리를 가져다 사용하는 개발자는 그냥 togglerProps를 버튼에 spread만 해주면 aria-expanded와 같은 속성들을 신경쓰지 않고 편안하게 코딩 할 수 있게 된다.
props를 묶어서 전달한다고해서 props collection pattern이라는 이름이 붙은것 같다.
