Render Props Pattern 활용하기 feat. Checkbox 컴포넌트

여기에 아주 흔한 Checkbox 컴포넌트가 있습니다.

Checkbox 영역에 마우스 포인터가 진입했을 때 체크 박스 컬러가 바뀌어야 하고, 클릭한 순간(active)에도 컬러를 바꿔줘야 합니다. 이런 요구사항이 있을 때는 어떻게 컴포넌트를 설계하면 좋을까요? 저는 이런 경우에는 Render Props Pattern이 유용하다고 생각합니다.

Render Props Pattern이란?

Render Props Pattern은 컴포넌트가 자식 컴포넌트에게 함수를 전달하고, 자식 컴포넌트가 그 함수를 사용해서 자신의 UI를 만드는 방식입니다.

코드를 살펴보겠습니다.

Checkbox 컴포넌트를 구현하기 위해 InteractiveArea 컴포넌트를 만들어봤습니다.

이 컴포넌트를 보시면 컴포넌트가 함수를 전달하고 있는 것을 확인할 수 있습니다.

컴포넌트 사용 방법은 아래와 같습니다.

isHovered와 isActive 상태를 받아서 Checkbox 아이콘의 색상을 변경하고 있습니다.

Render Props Pattern의 장점

1. 명확한 역할

Render Props Pattern은 부모 컴포넌트에서 상태를 관리하고, 자식 컴포넌트에서는 그 상태에 따라 원하는 UI를 만들고 있습니다. 각 컴포넌트에서의 역할이 명확하기 때문에 어느 컴포넌트에서 무엇을 하고 있는지 쉽게 이해할 수 있습니다.

만약 InteractiveArea 컴포넌트 없이 Checkbox 컴포넌트를 구현한다면 아래와 같이 될 거예요.

코드 길이는 비슷하지만 역할이 나뉘어있지 않기 때문에 코드가 어떤 처리를 하고 있는지 바로 이해하기 어렵습니다.

Render Props Pattern을 사용하고 있는 코드가 좀 더 가독성이 좋습니다.

2. 재사용성

InteractiveArea 컴포넌트를 한 번 만들어놓으면 정말 편리합니다. 특정 영역에 마우스 포인터가 진입했을 때, 그리고 마우스를 눌렀을 때 어떤 처리가 필요한 상황이라면 만들어 둔 것을 다른 컴포넌트에서도 동일하게 재사용할 수 있기 때문입니다. Radio Button이나 Dropdown 컴포넌트에서도 사용할 수 있겠네요.

끝까지 읽어주셔서 감사합니다.

전체 코드가 궁금하시다면 여기서 확인하실 수 있습니다.