🌳7월3일 TIL🎶

❓ 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>
);