디자인 패턴
[React] 리액트 Render Props 패턴 2가지 사용 방법
[React] 리액트 Render Props 패턴 2가지 사용 방법
2024.05.11children Prop을 이용해 컴포넌트 합성(component composition) 형태로 작성하면 부모 컴포넌트를 수정하지 않고도 자식 컴포넌트를 자유롭게 추가해서 사용할 수 있다. 일반적으로 데이터(상태) 공유는 상태 끌어올리기 방법이 가장 간단하지만 최상위 컴포넌트가 데이터(상태)와 모든 하위 컴포넌트를 갖고 있으면 해당 상태와 관련 없는 모든 하위 컴포넌트도 렌더링에 영향을 주는 단점이 있다(상태 끌어올리기로 부모 컴포넌트 상태가 변경돼서 업데이트하면 하위 컴포넌트도 다시 렌더링 하므로). 이땐 Render Props 패턴을 활용할 수 있다. 어떤 컴포넌트를 렌더링할지에 대한 로직을 상위 컴포넌트가 결정하고, 하위 컴포넌트는 자신이 관리하는 상태를 인자로 받은 render(혹은 childre..