오늘 학습한 내용
- 4일차 복습
- async-await
- 동적 url
- 영화앱에 navbar, 카테고리 기능 추가
복습
async-await
4일차에 학습한 내용이 손에 잘 익지 않아서 연습했다. 여기서 더 줄일 수 있다는데 당장은 구조를 파악하는게 우선이기에 나는 이런식으로 작성했다.
const getMovie = async () => {
const response = await fetch(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
);
const json = await response.json();
//setMovies(json.data.movies);
//setLoading(false);
};map과 jsx를 이용해서 새로운 화면을 구성할 때 왜 div태그에 key를 넣어줘야 하는지 이해되지 않아서 찾아봤다. 이 글을 보고 납득되었다. 배열과 연결리스트 차이와 비슷한 것 같다. key를 넣어주지 않게 되면 변경하려는 부분 외에도 변경이 발생하므로 key를 넣어주는 것이 수정에 유리하다.
<div>
{movies.map((movie) => (
<div key={movie.id}>
<h2>{movie.title}</h2>
<p>{movie.summary}</p>
</div>
))}
</div>동적 url
마찬가지로 손에 익지 않아서 한번더 해봤다. url에 변수를 담아 보내는걸 동적 url이라고 한다. 내 앱에서 id를 이동할 스크린에 보내기 위해 Router내부 path를 다음과 같이 지정한다.
<Route path="/movie/:id">: 붙이는게 꼭 필요함. 그리고 링크를 통해 넘어갈 스크린에서 받아온 id를 다시 저장하는 작업을 거쳐야 한다.
react-router-dom에서 해당 작업을 도와주는 함수가 있다.
import { useParams } from "react-router-dom";불러와주면 usParams함수를 사용할 수 있다.
실습 카테고리 기능 추가
이 기능을 처음 써봤을 때 활용가능성이 크다고 생각해서 응용해서 연습해보기로 했다. 이와 관련한 기능을 내가 만든 movie app에 추가할 것이다.
새로운 screen을 만들고 그 페이지를 해당 장르가 포함된 영화만 보여주도록 기능을 추가할 것이다.
생각보다 시간이 많이 걸렸다. 그래도 기능 구현에 성공해서 뿌듯ㅎ.ㅎ
url쿼리스트링은 다음과 같이 설정했다.
const response = await fetch(
`https://yts.mx/api/v2/list_movies.json?sort_by=year&${group}`
);연도 순으로 정렬하고 group 항목만 받아오기!
이렇게 귀찮게 변수를 설정한 이유가 있다. 단순히 genre 데이터만 사용해서 자료를 가져온다면 &genre=${변수} 로 설정하는게 훨씬 더 직관적이고 쉽다. 그러나 높은 평점의 작품도 카테고리로 구분해서 가져오고 싶었다.
그래서 Group_obj 라는 객체를 이용해서 내가 원하는 url쿼리스트링을 저장한 뒤에 해당 페이지를 호출할 때 붙여넣어줬다.
const Group_obj = {
"High Rating": "minimum_rating=9",
Romance: "genre=romance",
Comedy: "genre=comedy",
Horror: "genre=horror",
};
const Group_key_arr = Object.keys(Group_obj);
export { Group_obj, Group_key_arr };실습 편의성을 위해 해당 주소로 연결되는 링크(react router dom의 Link)는 따로 걸지 않고, 실제 주소를 입력해 확인하는 식으로 확인했다.
카테고리 별로 화면이 잘 출력되는지도 확인해야하기 때문에 route폴더에 Group.js 컴포넌트를 만들어줬다. Group컴포넌트는 Home컴포넌트를 만들 때와 유사하게 만들었으므로 생략함.
실습 Navbar 추가
미니 프로젝트를 성공적으로 끝내서 조금 더 욕심내보기로 했다. navbar기능을 추가해서 gui를 만든 과정을 정리했다.
navbar를 만들기 위해 컴포넌트 폴더에 Navbar.js라는 컴포넌트를 새로 만들었다. 이미 Group 관련 오브젝트를 만들었기 때문에 다시한번 사용했다.
import { NavLink } from "react-router-dom";
import { Group_key_arr, Group_obj } from "../atom/NavList";
import styles from "./Navbar.module.css";
function Navbar() {
return (
<nav className={styles.container}>
<div>
<div className={styles.group}>
<NavLink to="/">Home</NavLink>
</div>
{Group_key_arr.map((key) => (
<div className={styles.group} key={key}>
<NavLink exact to={`/group/${Group_obj[key]}`}>
{key}
</NavLink>
</div>
))}
</div>
</nav>
);
}
export default Navbar;최소한의 css도 만들었는데, 이걸 어떻게 붙여야 내가 생각한 nav기능이 될지 고민이었다. 이미 비슷한 기능을 구현한 다른 사람들의 자료를 찾아보니 App컴포넌트에 붙이면 됐다.
Router컴포넌트 바로 하단에 Navbar컴포넌트를 붙여서 완성시켰다.
<Route path="/group/:group">
<Group />
</Route>react router에 경로를 지정할 때는 group이라는 변수를 받아오도록 설정했다.
내일은 Movie컴포넌트 디자인을 수정하고 Home에서 image slide를 구현하는게 목표! 작은 기능이지만 새롭게 만들었다는게 너무 뿌듯하다.
