[홈] 리스트 설정 BottomSheet 마크업

[eunddodi]

🤔 해결하려는 문제가 무엇인가요?

• closes #121
• theme에 list divider를 추가했어요

  여기 가운데 있는 회색 줄

🎉 어떻게 해결했나요?

• 홈의 Card 컴포넌트가 아직 merge 안돼서, 우선 BottomSheet를 열고 닫을 수 있는 임시 버튼을 추가했어요
• 추후에 실제로 사용할 때에는 TextField의 initialValue를 props로 주입 받아야 할 것 같아요

이대로 괜찮으시다면 소지품 설정 BottomSheet도 동일하게 개발하겠습니다!

📚 Attachment (Option)

[eunddodi]

요건 PR과 직접적인 관계는 없는 내용인데요, AppBar에서 FC를 사용하는 이유가 따로 있는건가요?? 코드 작성할 때 컴포넌트가 어떤 props를 받는지 알 수가 없어서 살짝 불편하더라고요 🤔 그런데 민규님도 혜성님도 FC를 쓰시길래 제가 모르는 이유가 있나 궁금했어요

// FC 사용
const AppBar: FC<Props> = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }) => {}

// 사용 X
const AppBar = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }:Props)

FC를 쓰면 children prop이 implicit prop으로 주입돼서 위험하단 이야기도 어디서 본 것 같아서 궁금했어요!

[github-actions[bot]]

Bundle Sizes

Compared against 3ca731902a7ed960bcf8b97d4611f161b8f0c9f9

Route	Size (gzipped)	Diff
/	91.37 KB	+3.26 KB

Dynamic import	Size (gzipped)	Diff
../components/route-home/CategorySection.tsx -> ./CategorySettingBottomSheet	5.94 KB	-1.62 KB

[hansol-FE]

요건 PR과 직접적인 관계는 없는 내용인데요, AppBar에서 FC를 사용하는 이유가 따로 있는건가요?? 코드 작성할 때 컴포넌트가 어떤 props를 받는지 알 수가 없어서 살짝 불편하더라고요 🤔 그런데 민규님도 혜성님도 FC를 쓰시길래 제가 모르는 이유가 있나 궁금했어요

오 저도 이거 궁금했던거!

[hyesungoh]

요건 PR과 직접적인 관계는 없는 내용인데요, AppBar에서 FC를 사용하는 이유가 따로 있는건가요?? 코드 작성할 때 컴포넌트가 어떤 props를 받는지 알 수가 없어서 살짝 불편하더라고요 🤔 그런데 민규님도 혜성님도 FC를 쓰시길래 제가 모르는 이유가 있나 궁금했어요

// FC 사용
const AppBar: FC<Props> = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }) => {}

// 사용 X
const AppBar = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }:Props)

FC를 쓰면 children prop이 implicit prop으로 주입돼서 위험하단 이야기도 어디서 본 것 같아서 궁금했어요!

흠 제가 생각하기에는 취향의 영역일 거 같아요 !

react 18 버전 이전에는 FC 타입의 컴포넌트에 children이 포함되어 사용하지 않는 props를 받을 수 있었지만, 18 버전부터는 명시적으로 적어야된다고 하더라구요 !

물론 저도 많이 사용해보진 않아서 모르는 부분이 있을 거 같기도해요 ...

사실 이 부분이나 styled 부분이나 컨벤션을 정하는 게 좋을 거 같긴 합니다 ㅠ

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	8f90a26
Status:	✅  Deploy successful!
Preview URL:	https://63a98ce2.12-team3-web.pages.dev
Branch Preview URL:	https://issue-121.12-team3-web.pages.dev

View logs

[eunddodi]

👍 👍 👍 고생하셨어요

별 건 아니지만 ...

useState<boolean>(false)
useState(false)

styled.li
styled('li')

이렇게 사용 방법이 혼선되어 있는 거 같긴해요 !

이후에 다 같이 컨벤션을 정해봐도 좋을 거 같아요

styled 같은 경우 전 전자를 더 선호하는데 props 받는 경우는 후자가 더 편해서 ㅋㅋ 그렇게 사용하고 있긴 했습니다 컨벤션 맞춰봐요!

[eunddodi]

요건 PR과 직접적인 관계는 없는 내용인데요, AppBar에서 FC를 사용하는 이유가 따로 있는건가요?? 코드 작성할 때 컴포넌트가 어떤 props를 받는지 알 수가 없어서 살짝 불편하더라고요 🤔 그런데 민규님도 혜성님도 FC를 쓰시길래 제가 모르는 이유가 있나 궁금했어요

// FC 사용
const AppBar: FC<Props> = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }) => {}

// 사용 X
const AppBar = ({ backButtonType = 'chevron', title, rightElement, onClickBackButton }:Props)

FC를 쓰면 children prop이 implicit prop으로 주입돼서 위험하단 이야기도 어디서 본 것 같아서 궁금했어요!

흠 제가 생각하기에는 취향의 영역일 거 같아요 !

react 18 버전 이전에는 FC 타입의 컴포넌트에 children이 포함되어 사용하지 않는 props를 받을 수 있었지만, 18 버전부터는 명시적으로 적어야된다고 하더라구요 !

물론 저도 많이 사용해보진 않아서 모르는 부분이 있을 거 같기도해요 ...

사실 이 부분이나 styled 부분이나 컨벤션을 정하는 게 좋을 거 같긴 합니다 ㅠ

오홍 React18에서 업데이트가 되었군요 답변 감사합니다