여러 컴포넌트에서 동일한 로직을 사용하고 싶을 때 사용한다.
요즘엔 커스텀으로 재사용 가능한 로직을 분리하는 형식을 많이 사용하기에 고차 컴포넌트를 사용하는 경우는 많지 않다.
실제로 사용하는 경우가 그렇게 많지 않았는데 suspensive 라이브러리에선 wrap 으로 api를 제공한다. 내부적으로는 고차 컴포넌트 패턴을 사용하지 않을까.
- 재사용 가능한 로직을 한 곳에 모아 관리가 가능하다.
- prop 이름은 충돌을 일으킬 수 있다.
시원허게 depp-merge 사용하면 괜찮지 않을까?
render props 패턴은 잘 추상화한 컴포넌트 내부에 있는 상태를 필요할 때 외부에서 사용할 수 있게끔 노출시키는 것이다. 라고 저는 알고 있읍니다,,
다들 잘 아시겠지만 ark 라이브러리가 이 패턴을 자주 사용하는데, 실제 내부 로직을 잘 추상화하고 있어 외부에서 사용하기 좋은 것 같아요.
특히, 컴포넌트 내부에서 기본으로 보여주는 포맷팅 로직을 외부에서 필요시 커스텀하는 예시가 해당 패턴을 잘 사용한 예시라고 생각합니다.
저희도 usehook-ts처럼 커스텀훅 잘 만들어서 배포해보는 것은 어때요?
은 뭐 다들 잘 아시니까,,
단순히 채팅 어플리케이션을 만든다고 했을 때 책의 예시처럼 고민하진 않았을 것 같은데, 코드 작성하면서 이런 부분까지 고민해보는 것도 좋아보이네요,,!
webpack을 안 써서 잘 몰랐는데 webpackChunkName과 같은 magic comment를 통해 코드단에서 조금 더 세세하게 설정할 수 있네요!
Next.js를 많이 사용하다보니 얘네는 페이지 단위로 자동으로 스플리팅해줘서 고민이 없었는데, 이전에 Next.js 사용하기 전에는 페이지 단위로 모두 처리해줘야 했다는 것이 생각나네요.
개인적으로 책에서 PRPL 패턴 내용을 글로 본 후 patterns 사이트를 방문해서 영상을 보니 훨씬 이해가 잘 됐네요,, (patterns 내용과 되게 비슷하긴 하네요,,)
지나가다 브라우저에게 resource의 fetch의 우선순위 힌트를 주는 것을 봐서 요것도 남깁니다,,
content-visibility를 단순히 요소를 숨길 목적으로만 알고 있었는데,, 최적화 목적으로도 사용할 수 있다는 것ㅇ르 오늘 처음 알았습니다,,