위 예제처럼 컴포넌트 사용자는 아주 간단하게 render 프로퍼티만을 전달함으로써 컴포넌트의 렌더링 방식을 컨트롤할 수 있고, 좀 더 유연하고 다양한 방법으로 컴포넌트를 활용할 수 있음.
이러한 Render Props 패턴은 구현도 간단하고, 동일한 렌더링 방식이 연속적으로 사용되는 컴포넌트(리스트나 테이블 형태)에서는 아주 유용함. 하지만 복잡한 조건의 렌더링 방식을 표현하기에는 제한이 있으며, 자칫 잘못하면 render 함수가 너무 복잡해지거나 render 프로퍼티가 너무 많아지는 문제가 발생할 수 있음.
또한 컴포넌트 형태의 호출()이 아닌 함수 형태의 호출(() => ())로 렌더링을 하면 리액트에서 컴포넌트로 인식하지 않기 때문에, 훅(hook)과 같이 컴포넌트에서만 쓸 수 있는 기능을 사용할 때는 주의가 필요합니다.
그러면 복잡한 조건을 처리할 수 있고, 좀 더 컴포넌트스럽게 렌더링을 컨트롤할 수 있는 방법은 없을까? 그 방법을 위해서 이번에는 합성 컴포넌트에 대해서 알아보겠음
내용이 길고 깊어서 여기에 기술하지않고 따로 보는게 나을듯함.
핵심은 컴포넌트 호출시에는 컴포넌트 호출 방식을 따르는 것이 좋으며, 컴포넌트들을 덩어리로 쪼개서 사용하는 것이 좋으며 합성 컴포넌트 방식을 통한 컴포넌트들을 감싸는 형태가 되는게 효율적이며, 제어 컴포넌트(setState) 등을 이용하여
직접 수정하기보다는 props를 통한 함수형 업데이트 방식을 차용하는게 좋다는 것. 아주 좋은 글인듯함..
컴포넌트들을 잘 정리하면 이렇게 아름답게 호출이 가능함.
출처 : https://fe-developers.kakaoent.com/2022/221110-ioc-pattern/
