Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- useSWRImmutable
- 마이크 권한 요청
- npm module
- es module
- 백틱
- npm publish
- npm library
- CJS
- svg style
- react-icons
- NEXT
- useQuery
- next.js
- useState
- 웹 디자인
- recoil
- window.scrollY
- 동적 디자인
- nextauth
- 템플릿 리터럴
- python
- flutter
- useCallback()
- Lottie web
- useSwr
- 웹 애니메이션
- React
- Tailwind CSS
- github login
- typescript
Archives
- Today
- Total
목록PX (1)
김재욱의 이모저모
특정 props의 유무에 따라 디자인이 달라지도록 컴포넌트 작성하기
우리의 프로젝트를 진행하면서 자주 사용할 UI들은 컴포넌트를 만들어서 여러 페이지에서 사용하려고 했다. 하지만 아래의 이미지의 컴포넌트를 하나의 컴포넌트로 관리하자는 말이 있어서, 이를 어떻게 설계해야 할지 고민해야 했다. 위 컴포넌트는 ListItem이라는 컴포넌트였고, 이 컴포넌트에는 Icon, Title, Description이라는 값이 들어갈 수 있다. Title은 반드시 들어가야 하는 값은 Title 값이고, Description과 Icon 값은 존재할 수도 존재하지 않을 수도 있다. 처음에는 Icon과 Description의 유무에 따라 해당 컴포넌트의 Wrapper를 따로 작성하였다. 이렇게 코드를 작성하니 Wrapper를 총 3개 작성해야 했고, 앞으로 다른 경우의 수가 생긴다면 최대 8개..
Front-end/web design
2023. 5. 31. 15:39