Composition Pattern 과 리액트 Legacy API 에 대해

[chasj0326]

React 공식문서 - Legacy API

논의 사항

탭 컴포넌트에서 React.Children.toArray 로 탭들을 배열에 넣고 훅에서 관리하는 방식으로 구현했었습니다!

TabItem 은 children 과 title 을 들고 있다가 useTab 훅에게 전달해주고,
Tab은 useTab훅을 사용해서 화면에 currentTab 을 뿌려주는 방식

여기서 useTab 훅 내부에서 각 탭들을 배열로 관리하기 위해 리액트의 Children, isValidElement 를 사용했었는데,
Children, isValidElement 가 공식문서에서는 Legacy API 라고 나오네요!
공식문서에서는 이런것들에 대한 대안 중 하나로 createContext 를 제시하고 있어요! 따라서 아코디언 컴포넌트는 contextAPI 를 사용해서 구현했습니다!

@bbearcookie 상훈님이 Funnel 구현할 때 유사한 로직을 쓴 걸로 알아서, 공유드립니다 :)

추가

탭 컴포넌트도 createContext 를 쓰는 방향으로 바꿔보기 위해,
TabItem, TabHeader 가 같은 Tab 컨텍스트를 구독하고,
TabItem 함수가 호출되면 컨텍스트 내의 탭 배열에 아이템을 등록하는 식으로 구현하려 했었는데요. (아래 예시)

const notificateTab = (tabItem) => setTabs(prev => [...prev, tabItem]);

TabItem 함수가 호출될 때 마다 아이템을 등록하고, 등록할 때는 또 존재하는 아이템인지 검증을 해야해서 로직이 더 복잡해지더라구요!
context 변경이 자주 생기기 때문에 구독하는 다른 컴포넌트들이 렌더링이 무수히 되는 현상도 발생하고..

따라서 공식 문서에 나와있는, Children 을 map 해서 컴포넌트 자체를 자동생성하는 사례가 아닌.. 지금처럼 올바른 컴포넌트인지 검증하고 배열로 컴포넌트를 보관하기 위함이라면 어쩔 수 없지 않을까 하는 생각도 듭니다!

[bbearcookie]

오!! 이와 관련해서 저도 고민을 했었는데요!

상태 노출

우선 상태를 컴포넌트의 외부에서 접근할 수 있도록 노출할지에 대한 고민을 했습니다.

노출하지 않는다면

원래는 상위 컴포넌트인 Funnel이 자식인 Step에게 Context를 공유하고, 외부에는 노출하지 않는 형태인 Compound Pattern으로 구현할 계획이었어요!

노출한다면

그러나 계속 고민 하다 보니 퍼널의 현재 스텝 정보, 다음 페이지로 이동 같은 동작을 퍼널을 사용하는 페이지에서 알고 있어야 버튼의 형태도 바깥에서 커스텀해서 만들 수 있겠다는 생각을 하게 되었어요.
그래서 로직은 hook 으로 묶어서 외부에 노출하고, 컴포넌트에서는 Children 을 검사해서 렌더링하는 로직을 작성하게 되었어요.

Legacy API와 관련해서

Legacy API 는 최대한 지양하고 싶긴 했었는데요.. 구현하려는 방향에서 고민을 해결하는 방법이 우선 Legacy API밖에 생각이 안났었습니다 😂😂

구현 조건

1. Funnel의 children 에 예측한 Step 컴포넌트가 아닌 다른 div, span 등등이 들어오는 경우를 필터링 해야 함.
2. Funnel의 Step 중에서 특정 name 을 prop으로 가진 녀석을 필터링하고, 화면에 하나의 스텝만 보여줘야 함.

Chdilren 이 Legacy API에 분류되긴 하지만, 구현하면서 참고했던 toss-slash 오픈소스 라이브러리의 useFunnel 에서도 Letacy API를 사용하고 있긴 했어서 저도 사용해보게 되었습니다.

다만, 더 좋은 방법이 있을 것 같긴 한데.. 고민이 되는 부분이네요!!