REACT. Node.js Netflix App | Netflix 클론 코딩 (6)

1. react-router-dom(6.3.0 버전)

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movies" element={<Home type="movie" />} />
        <Route path="/series" element={<Home type="series" />} />
      </Routes>
    </BrowserRouter>
  );
};

5버전과 많이 달라서 찾는다고 조금 헤맸다

- Switch는 더이상 지원하지 않는다고 한다 대신 <Routes />를 쓴다

- <Route path="경로" element={<페이지 props />} />

 

1-1. user이 로그인 되어 있을 때와 로그인 되어 있지 않을 때의 경로

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

const App = () => {
  const user = true;
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={user ? <Home /> : <Navigate to="register" />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

user이 로그인 되어있을 때에는 home으로 가고. 로그인 되어 있지 않으면 register로 가게 

- Redirect를 더이상 지원하지 않는다. 대신 Navigate를 지원한다

 

1-2. user 로그인 해야 경로도 볼 수 있음

{user && (
  <>
    <Route path="/movies" element={<Home type="movies" />} />
    <Route path="/series" element={<Home type="series" />} />
    <Route path="/watch" element={<Watch />} />
  </>
)}

 

2. axios 사용해서 데이터 가져오기

1) yarn add axios 설치하기

 

2) package.json에 proxy 설정

"proxy": "http://localhost:8800/api/"

 

3) useEffect 훅에서 async await 하기

3-1) 랜덤리스트 데이터 출력하기

const [lists, setLists] = useState([]);
const [genre, setGenre] = useState(null);

useEffect(() => {
  const getRandomLists = async () => {__try_catch__};
});

3-2) try, catch 하기

try {
  const res = await axios.get(
    `lists${type ? "?type=" + type : ""}${
      genre ? "&genre=" + genre : ""
    }`,
    { headers: {token: "access key",}, }
  );
  console.log(res);
} catch (err) {
  console.log(err);
}

3-2-1) await.axios.get(__내용__)

`lists${type ? "?type=" + type : ""}${ genre ? "&genre=" + genre : ""}`

3-2-2) console.log(res) 를 찍으면 models/List.js에서 작성한 ListSchema의 양식을 토대로 한 데이터들이 나온다

3-2-3) 데이터가 잘 나오면 이걸 setLists로 값을 넘겨준다

setLists(res.data);

 

3-3) 마무리

const [lists, setLists] = useState([]);
const [genre, setGenre] = useState(null);

useEffect(() => {
  const getRandomLists = async () => {
    try {
      const res = await axios.get(__생략__);
      setLists(res.data);
    } catch (err) {
      console.log(err);
    }
  };
  getRandomLists();
}, [type, genre]);

3-3-1) 마지막에 [type, genre]는 검사하고자 하는 항목을 나타내며, 생략 시, 렌더링 될 때 마다 실행

 

3. 가져온 데이터 활용하기

 Home.jsx 

lists의 데이터를 받아서 <List />컴포넌트에 props 넘겨줌

return (
  <div className="home">
    <Navbar />
    <Featured type={type} />
    {lists.map((list) => (
      <List list={list} />
    ))}
  </div>
);

 

 List.jsx 

props를 가져와서 <listItem />에 또 props로 넘겨줌

<div className="container" ref={listRef}>
  {list.content.map((item, i) => (
    <ListItem index={i} item={item} />
  ))}
</div>

 

 ListItem.jsx 

item을 props로 받아왔으나... 사실 item은 list.jsx에서 list.content.map을 해버려서 모든 값이 있는게 아니다

그래서 다시 useEffect를 해주어야 한다

const [movie, setMovie] = useState({});

useEffect(() => {
  const getMovie = async () => {
    try {
      const res = await axios.get("/movies/find/" + item, {
      headers: {token: "__access_key__"},});
      setMovie(res.data);
    } catch (err) {
      console.log(err);
    }
  };
  getMovie();
}, [item]);

 

return에 {movie.img} 뭐 이런거 해주면... 끝

 

4. <Link> <Link /> react-router-dom 6 버전으로 만들기

<Link to="/watch" state={{ movie }}></Link>