2024.07.20 프로그래머스 - React 동적 UI 개발 6

React 기반 동적 UI 개발 - 6

BookDetail Page 개발

Router 설정

• App.tsx

    const router = createBrowserRouter([
      {
        path: "/",
        element: <Layout />,
        errorElement: (
          <Layout>
            <Error />
          </Layout>
        ),
        children: [
          { index: true, element: <Home /> },
          { path: "/books", element: <Books /> },
          { path: "/books/:bookId", element: <BookDetail /> },
          { path: "/login", element: <Login /> },
          { path: "/signup", element: <Signup /> },
          { path: "/reset", element: <ResetPassword /> },
        ],
      },
    ]);
  

  • /books/:bookId 경로에 BookDetail 페이지를 연결 하였다.
  • URL Param을 해당 페이지 컴포넌트에서 받아 들여 사용하면 된다!

useParams() : React-Router

• useParams 훅은 연결된 URL의 Parameter 값을 가져올 수 있다.
  • React-Router의 내장된 훅이다.

• BookDetail.tsx

    import React, { useEffect } from "react";
    import { useParams } from "react-router-dom";
    import styled from "styled-components";
    import { useBook } from "../hooks/useBook";
      
    function BookDetail() {
    // URL Parameter 사용
      const { bookId } = useParams();
      const { book } = useBook(bookId);
      
      // Early Return
      if (!book) return null;
      
      return (
        <BookDetailStyle>
          <div>BookDetail</div>
        </BookDetailStyle>
      );
    }
      
    const BookDetailStyle = styled.div``;
      
    export default BookDetail;
      
  

dl, dt, dd 태그

• MDN

dl 태그

• 설명 목록 을 나타내는 태그
• dt 로 표기한 용어와 , dd 로 표기한 설명 그룹 목록을 감싸서 설명 목록을 생성한다.

dt 태그

• 용어 정의

dd 태그

• 설명 그룹

해당 마크업을 사용할 떄 주의 할점

• 블로그 글
• dt 와 dd 가 1:1 로 쌍을 이룰 때 사용하는 것이 가장 정확한 사용법이다
  • 스크린 리더 를 사용하는 사용자들은 해당 정보가 정확히 어떤 정보인지 파악하기 힘들다.
• ul 이나 ol 과 같이 병렬적인 아이템을 배치하는 용도로 사용해서는 안된다.

CSS : -webkit

강의에서 아래의 CSS 코드를 사용하였는데, 해당 스타일을 처음봐서

정리 한다.

display : -webkit-box;
-webkit-line-clamp : 4;
-webkit-box-orient: vertical;

해당 CSS 속성들은 Text를 자르는 용도로 사용된다.

특정 줄 만큼만 텍스트를 표시하고자 할 때 사용하면 된다.

display : -webkit-box;

• flexible box layout을 적용하기 위한 선언이다.
• -webkit-line-clamp 프로퍼티를 필수로 같이 사용해야 한다.
• 해당 프로퍼티를 사용하는 엘리먼트의 Text가 값으로 입력된 줄 수를 넘어가면 ... 으로 이어서 표시된다.
  • 이하 부분은 생략된다는 점

-webkit-line-clamp

• -webkit-box 로 설정된 레이아웃의 주축 방향을 설정 한다.
• Webkit 기반 브라우저에서 지원된다 (Chrome, safari)