[Team18] [FE] 배민찬 프로젝트 마무리 #68
Conversation
[FE] MainContents 부분 구현 완료
[FE] Carousel (Slider) 컴포넌트의 재사용성을 위해 리팩토링
- Modal (틀, 재사용 가능한 컴포넌트) 완성 - 상세정보 창에서 쓰일 SideDishStore(context) 생성
- DetailTop 1차 완성
- DetailTopGallery 동작 방식 변경
- 버그 많음.. 수정 중 - customHook - useFetch 통합
- 이미지 제대로 안뜨던 버그 수정완료
- Detail 페이지 1차 완성
[FE] 상세정보 창 (Detail - Modal) 1차 완성
- SubContents 컴포넌트 작동 방식 변경 (리팩토링) - 카테고리 모두 보이기 / 가리기 기능 추가
- DetailTopGallery의 Ref 관련 수정
* useRef로 classList 수정하는 방식에서 state변경하는 방식으로 변경
fix: hover 버그 수정
[FE] 서브 콘텐츠, 상세 페이지 버그 수정
- 이에 따라 페이지 초기 렌더시 SubContents에서
비동기 통신 시 (데이터 가져올 시) 서브콘텐츠 (슬라이더) 데이터의 구조 변경
- DetailTopInfo의 volumne -> quantity로 변경
[FE] API 적용 완료
회고마지막에 소통이 잘 안 된 부분이 있어 특정 기능을 구현 못한 것이 아쉽습니다. 항상 잘 따라와준 이브에게 너무너무 고맙고 😄 |
재사용 가능 컴포넌트들이 많아 보여서 좋네요. |
| `; | ||
|
|
||
| const App = () => ( | ||
| <ThemeProvider theme={theme}> |
| const { alt: subject, badge, detail_hash, type } = currProductData; | ||
| executeFetch(`/api/detail/${detail_hash}`, {subject, badge, type}); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [currProductData]); |
There was a problem hiding this comment.
아시겠지만 'currProductData' 값이 변경될때마다 useFffect 콜백함수는 실행됩니다.
| const visibleOptions = { | ||
| isModalVisible, | ||
| setIsModalVisible, | ||
| addCbFunc: handleAddCloseBtnClick, | ||
| }; |
| import DetailTopInfo from "./DetailTopInfo"; | ||
|
|
||
| const DetailTop = ({ result }) => { | ||
| return result && result.data && ( |
| const aGalleryItems = | ||
| thumb_images.map((image, i) => ( | ||
| <GalleryItem key={i} onClick={handleItemClick}> | ||
| <img src={image} alt={"image" + (i+1)} /> | ||
| </GalleryItem> | ||
| )); | ||
|
|
||
| while(aGalleryItems.length < 5) | ||
| aGalleryItems.push(<GalleryItem key={aGalleryItems.length} empty />); | ||
|
|
||
| setGalleryItems(aGalleryItems); |
There was a problem hiding this comment.
렌더링 => useEffect 전달된 콜백실행
이른 흐름으로 렌더링될텐데요.
useEffect 전달된 함수안에서 jsx 코드를 만들어서 상태변경을 시킬필요는 없을거 같아요.
그부분은 useEffect 밖에서 처리해서 jsx안에 바로 결과를 넣어주면 좋겠습니다.
| useEffect(() => { | ||
| if (!addProps) return; | ||
| if (addProps.length > 0) { | ||
| const flag = addProps.some((v) => !v); | ||
| if (flag) { | ||
| isExecuteFunc && addFunc && addFunc(); | ||
| return; | ||
| }; | ||
| } | ||
|
|
||
| fetchData(); | ||
| isExecuteFunc && addFunc && addFunc(); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [...addProps]); |
There was a problem hiding this comment.
useEffect 가 막강하게 다양한 옵션을 받아서 처리하는 것인 인상적이네요.
어려운문제겠지만, 좀더 역할에 집중한다고 생각하면, useFetch 는 fetching 작업에만 집중하고 그 결과를 반환하는 것 까지만 해도 될 거 같아요.
그런점에서 두 번째 useEffect 역할은 안하고 그것은 해당 컴포넌트에서 하는 것이 어떨가 싶어요.
| @@ -0,0 +1,23 @@ | |||
| import styled from 'styled-components' | |||
|
|
|||
| const Tag = ({ type }) => { | |||
구현기능
Header (헤더)
MainContents (상단 탭)
SubContents (카테고리 - 슬라이더)
Detail (상세페이지 - 모달)
utilComponent (공용 컴포넌트)
hooks (커스텀 훅)
기타
컴포넌트 구조
추후 공부! (못다한 기능들)