Section 5 : Netflix 앱 완성하기

• 슬라이드 기능

  • scrollLeft를 이용

  <span
        className="arrow"
        onClick={() => {
          document.getElementById(id).scrollLeft -= window.innerWidth - 80;
        }}
      >
        {"<"}
  </span>

• React Router Dom

  • 웹, 앱에서 동적 라우팅 구현 가능
  • 기존 라우팅 아키텍처 : 라우팅이 실행 중인 앱 외부의 구성에서 처리
  • React Router Dom : 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 함
  • 설치방법

  npm install react-router-dom --save

  • 사용방법
    • BrowserRouter로 감싸기
    • Route를 Routes로 감싸기

  import { BrowserRouter } from 'react-router-dom';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
  // App을 BrowserRouter로 감싸야함
      <BrowserRouter>
          <App />
      </BrowserRouter>
  );

  import { Route, Routes } from 'react-router-dom';
  
  function App() {
      return (
  // Routes로 Route를 감싸야함
          <div className='App'>
              <Routes>
                  <Route>
                      <Route index element={<MainPage />} />
                      <Route path=':movieId' element={<DetailPage />} />
                      <Route path='search' element={<SearchPage />} />
                  </Route>
              </Routes>
          </div>
      );
  }

• Single Page Application (SPA)

  • 리액트는 SPA ⇒ 하나의 index.html 템플릿 파일을 가지고 있음
  • index.html에 JS를 이용해서 다른 컴포넌트를 index.html에 넣어 페이지를 변경
  • React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링에 도움을 줌

• useLocation & useNavigate

  • useNavigate()를 통해 페이지 이동하면서 state 값을 전달
  • useLocation()을 통해 데이터를 전달 받음

  const useQuery = () => {
          return new URLSearchParams(useLocation().search);
      };
  // useLocation() 사용
  // useNavigate는 onClick={() => navigate('주소')} 의 방식으로 사

• useDebounce

  • 검색 중에 검색하는 것들을 한번에 받아 데이터를 전달 ⇒ 백엔드로 과도한 데이터 전달 방지 및 성능 향상
  • 입력결과에 일정시간의 지연을 두어 처리
    • useDebounce.js

  import { useState, useEffect } from 'react';
  
  export const useDebounce = (value, delay) => {
      const [debounceValue, setDebounceValue] = useState(value);
  
      useEffect(() => {
          const handler = setTimeout(() => {
              setDebounceValue(value);
          }, delay);
  
          return () => {
              clearTimeout(handler);
          };
      }, [value, delay]);
  
      return debounceValue;
  };

  const [searchResults, setSearchResults] = useState([]);
  
  const useQuery = () => {
      return new URLSearchParams(useLocation().search);
  };
  
  let query = useQuery();
  const searchTerm = query.get('q');
  
  // useDebounce 사용방법 
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

• useParams

  • useParams를 이용해서 값을 가져옴

  const { movieId } = useParams();

• 모달 창 외부클릭시 모달 닫게 설정하기

  • useOnClickOutside.js

  import React, { useEffect } from 'react';
  
  const useOnClickOutside = (ref, handler) => {
      useEffect(() => {
          const listener = (event) => {
              console.log('ref', ref.current);
              if (!ref.current || ref.current.contains(event.target)) {
                  return;
              }
              handler();
          };
  
          document.addEventListener('mousedown', listener);
          document.addEventListener('touchstart', listener);
          return () => {
              document.addEventListener('mousedown', listener);
              document.addEventListener('touchstart', listener);
          };
      }, []);
  };
  
  export default useOnClickOutside;

  • useRef를 같이 이용

  const ref = useRef();
  
      useOnClickOutside(ref, () => {
          setModalOpen(false);
      });

• swiper 모듈을 이용해서 터치슬라이드 구현

  • 설치방법

  npm install swiper --save

  • swiper의 parameter
    • slidesPerView : view에 몇개가 보이게 할지 설정
    • slidesPerGroup : 슬라이드 시 몇개가 이동될지 설정