Codestates immersive course

---

React 스프린트

리액트 스프린트가 벌써 종료가 되었다. 일단 이번 스프린트에서 다룬 내용을 살펴 보자면

리액트가 무엇인지? 또 리액트 컴포넌트란 무엇인가, 클래스 컴포넌트는 뭐고, state 와 lifeCycle은 뭔가?

이런 큰 주제들로 youtube API 검색을 통해 youtube 영상을 불러오고 iframe을 넣어주고

나중에 다시 볼 영상을 LocalStorage에 넣어주고 또 삭제하는 기능까지 구현을 했다.

물론 스타일링을 안해서 보기에는 별로지만 일단 기능에 충실하려고 했다.

일단 디렉토리 구성은 다음과 같다.

components 폴더 외부에는 root인 index.js와 유튜브 데이터를 가져오거나 로컬 스토리지에서

데이터를 가져오는 모듈을 만들어서 사용했다.

그럼 컴포넌트 구성을 살펴보면 아래 사진과 같다.

일단 context API나 redux 등의 상태 관리 기능을 사용하지 않고 모든 state를 App.js에서 관리하고

자식 컴포넌트에 핸들러 함수를 props로 내려주어 lifting state up 방식으로 state를 바꿔주도록 하였다.

따라서 Search 컴포넌트에는 submit을 할 때 input의 value를 App.js의 state로 보내주고 API요청의 쿼리 스트링으로 넣어줬다.

VideoPlayer 컴포넌트에서는 검색을 한 직후 화면에서는 VideoList의 첫번째 영상이 나오도록 설정을 하였고

매번 검색마다 처리를 해줘야하니 검색을 하는 함수에서 동작을 시켜줬다.

VideoList 에서는 검색 결과로 나온 데이터가 setState되면 props로 받아서 map함수를 이용해

video의 개수 만큼 VideoListEntry를 생성해준다.

VideoListEntry에는 썸네일, 타이틀, 설명, 저장 버튼이 들어가게 설정을 해주었다.

저장 버튼을 누르면 localStorage.setItem을 실행하여 값을 video의 정보를 저장해주었고

state에도 추가를 해주었다. 따라서 저장을 하면 즉각적으로 저장된 비디오에 추가가 되고

삭제 버튼을 눌렀을 때도 똑같이 filter를 거친 데이터 배열이 setState되고 setItem이 되는 방식이다.

또한 componentDidMount 메서드를 이용하여 초기 화면에 localStorage에 있는 비디오들을 watchLaterList에 그려주었다.

마지막으로 검색어 state가 바뀔 때마다 전체 컴포넌트가 리 렌더링되는 현상이 있어서 App 컴포넌트를 제외한 나머지 자식 컴포넌트들은 함수 컴포넌트라 React.memo를 사용해서 불필요한 렌더링을 막아 주었다.

조금 아쉬운 부분은 스타일을 인라인 스타일로 작성했다는것과 과제 테스트 요구하는 사항으로 클래스 컴포넌트를 사용했다는 것이다.

꼭 이부분은 styled-component와 함수 컴포넌트를 이용해 리팩토링을 해봐야겠다.

또 redux까지는 사용하기에 불필요해보이고 context API, useReducer 정도 이용해서 상태관리를 하면 좋을 거 같다.

내일부터 리덕스 스프린트가 시작되는데 다른 동기 분들은 잘 하고 계시려나 걱정이 조금된다.

워낙 많고 쉽지않은 내용이 있었을텐데 다들 조금만 더 힘내서 프로젝트까지 달렸으면 좋겠다.