[프로젝트 회고] 집 꾸미기 제품 리스트 소개 페이지
🏡 집 꾸미기 제품 리스트 소개
📝 과제 설명
-
설 연휴 동안 선택과제로써 혼자서 작업하는 개인 프로젝트로 진행 되었다.
-
과제를 확인 후에 실제 '집 꾸미기'에서 사용되고 있는 페이지임을 확인했고
기업에서 API까지 제공해 주었다.
-
메인 이미지 Section과 하단 제품 리스트 Section으로 나누어 작업하였고
레이아웃과 로직에 집중하기로 생각하고 하단 제품 리스트에 들어가는 케러셀 라이브러리는 자체 생략하여 진행했다.
⚙️ 기술 스택
- React, React Hooks
- JavaScript, Styled-Component
- Git & GitHub, Build Tool (Create React App)
💻 기능 구현
- 메인 이미지 Section / 제품 리스트 Section
🏞 메인 이미지 Section
- 지금까지와는 다르게 이번에는 fetch가 아닌, axios를 통해서 데이터를 받아와보았다.
const fetchProduct = async () => {
try {
setError(null);
setProduct(null);
setLoading(true);
const response = await axios.get(
'제공받은 데이터 URL'
);
setProduct(response.data);
} catch (e) {
setError(e);
}
setLoading(false);
};
- currentId라는 상태 값을 만든 뒤에 제공받은 데이터 값과 확인하는 비교연산자를 통한 로직 구현 방식이 많았다. ex) currentId === product.productId
🛤 제품 리스트 Section
-
각 제품과 아이콘에 주어진 제품 Id가 있었기에 섹션이 나누어있어도 Props를 통한 currentId 상태 값 하나로 로직 구현이 가능했다.
-
리팩토링 사항으로 태그 안에서 로직을 구현한 부분을 함수로 뺄 수 있다는 것을 인지했으나, 첫 작업은 나만의 코드 이해도를 높이기 위해서 태그 내에 작성을 하였고 차후에 수정할 예정이다.
<ProductListBox>
{product.productList.map(product => (
<ProductDiv key={product.productId}>
<ProductBox
src={product.imageUrl}
alt="집꾸미기 제품"
productId={product.productId}
currentId={currentId} //Props로 받아온 값
onClick={() => {
if (currentId === product.productId) {
setCurrentId(0); // 제품 선택 상태 로직
} else {
setCurrentId(product.productId);
}
}}
/>
{product.discountRate > 0 && ( // 할인율 표시를 위한 로직
<DisCountBox>
{product.discountRate}
<span>%</span>
</DisCountBox>
)}
</ProductDiv>
))}
</ProductListBox>
🌅 최종 구현
개인과제를 통해서 생각하는 힘을 더 기른 것 같다. 무작정 코드를 작성하는 것이 아니라, 시작 전에 글로 작업 순서를 적고 기능을 구현하기 위한 흐름과 중요도를 체크한 뒤에 작업을 시작하는 법을 배울 수 있었던 좋은 시간이었다.🏆
Author And Source
이 문제에 관하여([프로젝트 회고] 집 꾸미기 제품 리스트 소개 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@changh950/프로젝트-회고-집-꾸미기-제품-리스트-소개-페이지
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
설 연휴 동안 선택과제로써 혼자서 작업하는 개인 프로젝트로 진행 되었다.
과제를 확인 후에 실제 '집 꾸미기'에서 사용되고 있는 페이지임을 확인했고
기업에서 API까지 제공해 주었다.
메인 이미지 Section과 하단 제품 리스트 Section으로 나누어 작업하였고
레이아웃과 로직에 집중하기로 생각하고 하단 제품 리스트에 들어가는 케러셀 라이브러리는 자체 생략하여 진행했다.
- 메인 이미지 Section / 제품 리스트 Section
const fetchProduct = async () => {
try {
setError(null);
setProduct(null);
setLoading(true);
const response = await axios.get(
'제공받은 데이터 URL'
);
setProduct(response.data);
} catch (e) {
setError(e);
}
setLoading(false);
};
각 제품과 아이콘에 주어진 제품 Id가 있었기에 섹션이 나누어있어도 Props를 통한 currentId 상태 값 하나로 로직 구현이 가능했다.
리팩토링 사항으로 태그 안에서 로직을 구현한 부분을 함수로 뺄 수 있다는 것을 인지했으나, 첫 작업은 나만의 코드 이해도를 높이기 위해서 태그 내에 작성을 하였고 차후에 수정할 예정이다.
<ProductListBox>
{product.productList.map(product => (
<ProductDiv key={product.productId}>
<ProductBox
src={product.imageUrl}
alt="집꾸미기 제품"
productId={product.productId}
currentId={currentId} //Props로 받아온 값
onClick={() => {
if (currentId === product.productId) {
setCurrentId(0); // 제품 선택 상태 로직
} else {
setCurrentId(product.productId);
}
}}
/>
{product.discountRate > 0 && ( // 할인율 표시를 위한 로직
<DisCountBox>
{product.discountRate}
<span>%</span>
</DisCountBox>
)}
</ProductDiv>
))}
</ProductListBox>
개인과제를 통해서 생각하는 힘을 더 기른 것 같다. 무작정 코드를 작성하는 것이 아니라, 시작 전에 글로 작업 순서를 적고 기능을 구현하기 위한 흐름과 중요도를 체크한 뒤에 작업을 시작하는 법을 배울 수 있었던 좋은 시간이었다.🏆
Author And Source
이 문제에 관하여([프로젝트 회고] 집 꾸미기 제품 리스트 소개 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@changh950/프로젝트-회고-집-꾸미기-제품-리스트-소개-페이지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)