최종 PR

[hae2ni]

배포 링크

🛠️ 기술 스택

역할	종류
Library	REACT
Language	typescript
Styleing	emotion
Package Manager	yarn
Data Fecthing	SWR

👏 역할 분담

권혜인	전언석
메인 검색 페이지 GET 검색	온보딩, 책 상세보기 페이지 상세 페이지 GET

💡 기능 명세

1. 온보딩 페이지

• 캐러셀
• 바로가기 ( 메인 페이지 ROUTER)

2. 검색 페이지

• 원하는 도서의 키워드를 검색하면 해당 키워드를 가진 도서들을 불러옵니다.

3. 책 상세 페이지

• 검색한 도서를 클릭하면 해당 도서의 상세 페이지로 이동합니다.

✨ PR POINT

1. 검색 페이지 SWR GET

검색 부분의 state를 useInput state로 관리하였습니다.

export default function SerachInput(prop: SearchInputProp) {
  const { userInput, setUserInput } = prop;

  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    setUserInput(e.target.value);
  }

  return (
    <>
      <Input
        placeholder="내용을 입력하세요"
        type="text"
        value={userInput}
        onChange={handleSearch}
      />
    </>
  );
}

그래서, 이후에 onChange를 통해서 검색한 값을 관리하고, 해당 검색 값을 버튼이 눌렸을 때
화면에 '해리포터'에 관한 검색 결과입니다. 등과 같의 띄우기 위하여,

export default function SearchButton(props: SearchButtonProps) {
  const { userInput, setConfirmValue } = props;

  function handleButton() {
    setConfirmValue(userInput);
  }

  return (
    <IconButton type="button" onClick={handleButton}>
      <img src={SearchIcon} alt="버튼" />
    </IconButton>
  );
}

confirmValue와 setConfirmValue의 state로 관리하였습니다.
따라서,

export default function SearchWrapper(props: WrapperProp) {
  const { userInput, confirmValue, setConfirmValue, setUserInput } = props;

  return (
    <Wrapper>
      <Container>
        <SerachInput userInput={userInput} setUserInput={setUserInput} />
        <SearchButton userInput={userInput} setConfirmValue={setConfirmValue} />
      </Container>
      {confirmValue && (
        <Result>
          <SearchResult>{confirmValue}</SearchResult> 에 대한 검색 결과 입니다.
        </Result>
      )}
    </Wrapper>
  );
}

이렇게 완료 되었습니다!

멘토분들께 질문이 있습니다!

by 혜인
첫번째 고민으로는, input의 값을 useRef가 아니라 useState로 관리하고 있어, 원하지 않는 재렌더링이 일어날 것 같다는 생각이 들었습니다. 이 부분에서, useRef로 관리하는게 올바른 방식인지 궁금합니다!!

2. 검색 페이지 SWR GET 통신

최상단에서 GET통신을 해주었습니다.
버튼을 눌렀을 때 화면에 뜨는 변수인 confirmValue가 있을 때에만 통신을 할 수 있도록, swr을 이용해 코드를 짰습니다.

 const { data } = useSWR(
    confirmValue ? `https://dapi.kakao.com/v3/search/book?query=${confirmValue}` : null,
    fetcher
  );

이렇게 받아온 data를 Book 컴포넌트에 넣어두었습니다.

 {data &&
          data.map((book: Book) => {
            const { authors, contents, title, isbn, thumbnail } = book;
            return (
              <Books
                key={isbn}
                title={title}
                thumbnail={thumbnail}
                authors={authors}
                contents={contents}
              />
            );
          })}

멘토분들께 질문이 있습니다!

by 혜인
여기서, swr을 이용한 get 통신에서 틀린 게 있는지 여쭙고 싶습니다!!

멘토분들께 질문이 있습니다!

by 언석

• 상세 페이지에 데이터 전달을 어떻게 해야 할까요?
  search 페이지에서 데이터들을 쫘라락 받는데
  그렇다면 각 책에 대한 상세 페이지 정보도 다 받아온다는 건데
  이를 상세 페이지에 어떻게 전달을 해야할 지 고민을 했습니다.

원래는
state를 하나 만들어서 상세 페이지 클릭 시 해당 인덱스 번호를 넘겨줘서

{ !isDetailPageClicked && <Search /> }
{ isDetailPageClicked && <Detail /> }

이런 식으로 하고 props로 search page에서 받은 데이터를 detail page에 넘겨주려고 했는데,
클릭된 책이 무엇인지 인덱스 찾아야 하고, 그에 맞는 데이터 전달해야 하고 추가적인 task가 많을 거 같아서
그냥 동적 router 설정하고

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <Error />,
    children: [
      { index: true, element: <Onboarding /> },
      {
        path: '/search',
        children: [
          {
            index: true,
            element: <Search />,
          },
          { path: ':title', element: <Detail /> },
        ],
      },
    ],
  },
]);

params로 책 제목 넘겨준 뒤 해당 책제목으로 한 번 더 API 요청 하는 식으로 진행하였습니다!

export default function Detail() {
  const { title } = useParams();
  const { data } = useSWR(`https://dapi.kakao.com/v3/search/book?query=${title}`, fetcher);

  return (
    <DetailWrapper>
      {data && (
        <DetailBox>
          <img src={data[0].thumbnail} alt="book-cover" width={270} height={400} />
          <article>
            <h1 css={mainTitle}>{data[0].title}</h1>
            <div css={bookInfo}>
              <span>{data[0].authors}</span>
              <span>{data[0].publisher}</span>
              <span>{data[0].price}</span>
            </div>
            <p css={bookContent}>{data[0].contents}</p>
          </article>
        </DetailBox>
      )}
    </DetailWrapper>
  );
}

이렇게 할 때 우려되는 부분이 불필요한 API 요청을 한 번 더 하게 된 것이 아닌가 싶었는데요

보통 이런 상품 페이지의 상세 페이지를 클릭할 때, 한 번 더 API 요청을 하는지 어떻게 하는지 궁금했습니다!!!!