feat: 04-Tabs 과제 구현 (최병찬)#13
Conversation
SanginJeong
left a comment
SanginJeong
left a comment
There was a problem hiding this comment.
Provider 에러를 처리해주시는 점 배웠습니다 고생하셨습니다
| onClick={handleClick} | ||
| style={{ backgroundColor: `${tabCtx.value === value ? "blue" : ""}` }} | ||
| > | ||
| {value} |
There was a problem hiding this comment.
trigger는 value를 text로 바로 사용하는군요. 저는 이 부분도 children을 사용하는 것으로 구현했는데 이부분에 대해서 어떻게 생각하시는지 궁금합니다
There was a problem hiding this comment.
두 분의 코드에 관련해서 코멘트 남겼습니다!
요약해서 말쓰드리면 저는 children props로 받게되면 또다른 button이나 a 태그가 기존의 button 컴포넌트 하위로 올 수 있는 경우를 막고자 children 대신 value를 사용하였습니다!
| const tabCtx = useContext(TabContext); | ||
|
|
||
| if (!tabCtx) { | ||
| throw new Error("tab context must be called in TabsProvier"); | ||
| } |
There was a problem hiding this comment.
에러처리 부분을 커스텀훅으로 만들어 반복을 줄일 수도 있을 것 같습니다.
Trigger, Content 두 곳에서밖에 사용 하지 않으므로 취향에 따라 갈릴 것 같긴 합니다.
There was a problem hiding this comment.
상인님 말씀처럼 여러 곳(동일 파일 외에도 다른 파일)에서 사용되거나 현재처럼 간단하게 에러를 던지는 로직이 아닌 추가적인 로직 (토스트를 띄운다거나 로깅을 한다거나 등)이 있다면 context를 파싱하는 커스텀 훅을 제작해서 활용하는 편이 좋을 것 같습니다!
There was a problem hiding this comment.
type을 명시적으로 import해서 타입과 값을 구분한 점이 인상적이었습니다. 전체적으로 가독성도 좋아 보입니다 👍
| onClick={handleClick} | ||
| style={{ backgroundColor: `${tabCtx.value === value ? "blue" : ""}` }} | ||
| > | ||
| {value} |
|
|
||
| if (tabCtx.value !== value) return null; | ||
|
|
||
| return <div {...props}>{children}</div>; |
There was a problem hiding this comment.
저는 별 생각 없이 p 태그를 사용했는데, 의미적으로는 div가 더 적합해 보이네요 👍
k0nghaa
left a comment
k0nghaa
left a comment
There was a problem hiding this comment.
headless 방식으로 구현하셨군요!! 서로 의존성이 없고 재사용성이 높아 좋은 것 같습니다.
| return <TabContext value={tabCtx}>{children}</TabContext>; | ||
| } | ||
|
|
||
| function TabsList({ children, ...props }: { children: ReactNode }) { |
There was a problem hiding this comment.
TabsList와 TabTrigger에서 ...props를 추가한 이유는 사용자가 TabsList에 옵션을 추가할 수 있기 때문 맞을까요?
| }) { | ||
| const tabCtx = useContext(TabContext); | ||
|
|
||
| if (!tabCtx) { |
There was a problem hiding this comment.
단순 궁금증인데 TabContent와 TabTrigger에 있는 해당 동일 에러 처리를 한 곳에서 처리하는 방법이 있을까요? 🤔
4 participants
📝 과제 요약
💡 설계 및 고민한 부분
headless tabs 컴포넌트를 합성 컴포넌트를 활용하여 구현하였습니다.
컴포넌트의 구조나 props는 shadcn의 tabs 컴포넌트를 참고하였습니다.
합성 컴포넌트를 통해 사용처에서는 내부 컴포넌트 스타일링에 자유도를 갖고 컴포넌트 구조를 더 쉽게 파악할 수 있습니다.
Tabs컴포넌트는 활성 탭에 대한 상태를 관리하고 이를context api를 활용하여 하위 컴포넌트에게 넘겨주게 됩니다.하위 컴포넌트는
useContext를 통해 활성 탭 정보를 활용하고 있습니다.기본적인 탭 기능(활성 탭 컨텐츠를 보여줌)만 구현하였습니다.
📖 학습한 내용 및 어려웠던 점 (선택)
<Context.Provider>방식이 아닌<Context>방식을 통해 provider 컴포넌트를 구현합니다.❓ 질문 사항 (선택)
📸 스크린샷 (선택)