리액트 프로젝트 (API를 이용해 데이터 불러오기 feat. Youtube API)

김민우·2023년 1월 30일
0

스파르타 내배캠4기

목록 보기
59/73

타입스크립트를 배우고 나서 곧장 프로젝트가 시작 되었다. 새로운 5명의 팀원으로서 이번에는 구글에서 제공하는 유튜브 API를 이용해서 유튜브 영상을 이용한다.

주제는 초보 개발자를 위한 사이트로써 언어별로 영상을 볼 수 있고, 댓글로 깃헙 링크를 주고 받으며 소통할 수 있는 사이트를 계획 했다.

내가 맡은 부분은 디테일 영상이다.

메인 페이지에서 유뷰브 목록을 클릭시 디테일 페이지로 넘어가며 그에 대한 영상도 실행 되게끔 해야한다.


onClick 과 useNavigate 를 통해 detail 페이지 뒷 부분은 params로 video 데이터까지 같이 보내준다

유뷰브에서 제공하는 iframe 형식을 통해 유튜브 영상을 실행 시킬 수 있으며, 데이터에서 필요한 부분만 detail UI에 channelTitle 처럼 나타내줄 수 있다.

문제점
하지만, 여기까지는 문제 없이 왔지만 이 다음부터 문제였다.
우리는 기획단계에서 컴포넌트를 세부적으로 짰다. 컴포넌트의 분리는 코드 작성과 유지 보수에 있어서 되게 간편하지만, 상태 관리에 있어서는 신경 쓸 부분이 많다는 것을 뒤늦게 깨달았다.

코드 아래에 보면 AddComment컴포넌트와 RecoomendVideoSection에 컴포넌트에 video 값을 넘겨주는 것을 볼 수 있다.

처음 기획때부터 이 과정이 있을 것이라는 것을 생각해냈다면, 리덕스를 잘 못하더라도 도입할 마음이 큰 부분이었다.

해결
스테이트 관리를 뒤늦게 알게 되었고, 또한 불필요하게 데이터를 여러번 넘겨주어서, 컴포넌트에서 사용할 데이터만 넘겨주게 하면서 많은 양의 데이터가 여러번 넘어가지 않게 자제 시켜줬다.

profile
개발자로서 한걸음

0개의 댓글