❓ Route 세팅
BrowerRouter를 사용하여 경로별로 route를 세팅해주었다.
//App.tsx
<BrowserRouter>
<Header/>
<Routes>
<Route path="/" element={<MainPage />}></Route>
<Route path="/theme/:themeKey" element={<ThemePage />}></Route>
</Routes>
</BrowserRouter>
item을 클릭하면 onItemClick 함수를 통해 /theme/:themeKey 로 페이지 이동
<Items gap={0} columns={{ xs: 4, sm: 4, md: 6 }}>
{items.map((item, index) => (
<ItemContainer key={index} onClick={() => onItemClick('life_small_gift')}>
<Image
src={item.image}
alt={`선물 테마: ${item.category}`}
width="90x"
radius={30}
ratio="square"
/>
<p>{item.category}</p>
</ItemContainer>
))}
</Items>
이때, 중복된 타입을 가진 아이템들이 여러 개 존재하므로 items.ts 에 별도로 타입을 정의했다. 현재 주어진 요구사항에서는 각 카테고리 아이템의 이미지가 동일하지만 추후에 각 카테고리에 따른 이미지가 달라진다면, 하나의 파일에서 편리하게 관리할 수 있을 것 같다.
import itemImg from '@/assets/images/themeItem.jpeg';
type Item = {
category: string;
image: string;
};
const items: Item[] = [
{ category: '생일', image: itemImg },
{ category: '졸업선물', image: itemImg },
{ category: '스몰럭셔리', image: itemImg },
{ category: '명품선물', image: itemImg },
{ category: '결혼/집들이', image: itemImg },
{ category: '따뜻한선물', image: itemImg },
{ category: '가벼운선물', image: itemImg },
{ category: '팬심저격', image: itemImg },
{ category: '교환권', image: itemImg },
{ category: '건강/비타민', image: itemImg },
{ category: '과일/한우', image: itemImg },
{ category: '출산/키즈', image: itemImg },
];
export default items;
❓ react-router-dom의 Link와 useNavigate
Link
- Link 컴포넌트로 만든 부분을 누르면 URL경로가 바뀌면서 해당 경로로 지정된 컴포넌트가 보여진다.
- 개발자 도구에는 <a href=#> 로 보인다. 레퍼런스에서 제공된 페이지도 <a href=#> 로 뜨는 것을 보아하니, Link를 사용한 것 같다.
import {Link} from "react-router-dom";
<ul>
<li>
<Link to="/">메인</Link>
</li>
<li>
<Link to="/login">로그인</Link>
</li>
</ul>
Link 컴포넌트와 <a>의 차이점?
- <a href=#>는 전체 페이지를 재렌더링 시킨다. 브라우저 주소를 이동하고 페이지 자체를 새로고침한다. 따라서 상태 값이 유지되지 못하고 속도도 저하된다.
- <Link />는 SPA의 특징에 맞게 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지된다. 데이터를 필요한 부분만 불러올 수 있기 때문에 속도향상에 도움이된다.
- 쓰임의 차이
- <a href=#> 는 외부 프로젝트와 연결 할 때 주로 사용한다.
- <Link />는 프로젝트 내에서 페이지 전환하는 경우 사용한다.
라우팅을 처리하는 방법으로는 useNavigate()를 채택했다. 예전부터 자주 사용했던 메서드이기도 했고, Link와 달리 조건이 필요한 곳에서 navigate 함수를 호출해서 경로를 이동할 수 있기 때문이다.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const onItemClick = (themeKey: string) => {
navigate(`/theme/${themeKey}`);
};
❓ RankingSection.tsx 로직
하나의 파일에 여러 컴포넌트를 한번에 구현하면 코드의 가독성이 너무 떨어진다고 판단했다.
/section/Ranking/categories
categories 폴더에서 랭킹 섹션에 필요한 카테고리들을 구현하고 상위 컴포넌트에 import 하는 방식 채택
/section/Ranking/RankingSection.tsx
export const RankingSection = () => (
<SectionWrapper>
<Container maxWidth="1024px">
<Title>실시간 급상승 선물랭킹</Title>
<ContentWrapper>
<WhoCategories />
<Space />
<GiftCategories />
</ContentWrapper>
</Container>
</SectionWrapper>
);
'FE > 코딩일기' 카테고리의 다른 글
🌳7월5일 TIL🎶 (1) | 2024.07.05 |
---|---|
🌳7월4일 TIL🎶 (0) | 2024.07.05 |
🌳7월2일 TIL🎶 (0) | 2024.07.03 |
🌳7월1일 TIL🎶 (0) | 2024.07.01 |