🌈 watchaM
📎 watchaM github
📎 watchaM 배포 링크
🍊 목적
해당 프로젝트는 지금까지 학습한 react, redux, styled-component를 종합적으로 활용해 보기 위함으로 제작한 프로젝트이다.
가장 기본적이면서 웹페이지를 구성하는데 있어 필수적인 기능들을 구현하였다.
🍊 구현 기능
- 20개의 최신 영화 리스트업
- 검색창을 통한 검색기능
- 영화 카드 클릭 시 영화 상세 내용 제공
- 좋아요 클릭을 통한 영화 찜기능
🍊 Error
redux를 react router와 같이 쓸 때
vcould not find react-redux context value; please ensure the component is wrapped in a < Provide >
최상단에서 provide를 감싸줘야한다.
event dispatch & setState
const heartClick = (data) => {
dispatch(addLikeMovie(data));
setLikeMV(!likeMV)
};각각의 영화를 담는 movie.js 컴포넌트에 이미지를 클릭하면 like 표시가되는 event 핸들러를 추가해주었고, 이벤트가 발생하면 dispatch를 통해 like목록 상태를 수정하고 movie.js 컴포넌트 만의 [likeMV, setLikeMV] = useState(false)라는 상태를 만들어 주었다.
하지만, 기대했던 것과는 달리 dispatch는 제대로 동작하지만, likeMV의 상태가 true로 바뀌지 않고 계속 초기화상태를 유지하는 것이었다.
왜그럴까??
추측하길, dispatch를 통해 좋아하는 영화 state가 업데이트가 되어 모든 컴포넌트가 리랜더링되고, 그 과정에서 movie.js가 초기화되는 상황이 발생하는 것 같다.
그래서 결국에는 movie.js 상위 컴포넌트에서 좋아하는 영화의 상태에서 id값과 일치하는 항목에 변수를 할당해 주어 렌더링되도록 하였다.
의도한대로 동작하지만, 너무많은 렌더링이 발생한다는 생각이 든다.
지금 가지고 있는 상태는 allMovie, likeMovie라는 상태인데, likeMovie만 업데이트해주었는데도, 모든 movie.js 컴포넌트가 초기화되는 현상이 발생한다.
🍊 CSS
fetch로 받아온 영화를 정렬해 주기 위해 flex를 사용하였다.
하지만 결과는 아래와 같았다.
19번째, 20번째 영화는 동일한 간격을 가지고 오른쪽으로 정렬하기를 원했다.
그래서 <i> 태그를 만들어주어 빈공간을 채우도록 하였다.
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i> i {
width: ${({ title }) => (title ? '150px' : '200px')};
margin: 0 1rem;
} 
그 결과는 의도한대로 표현되었다. 하지만, 6개의 i태그를 임의로 만들어 준 것이기 때문에, 그 이상의 빈공간이 생기게 되면 이전처럼 정렬이 깨진다는 문제를 여전히 가지고 있다.
🍊 최종 결과 gif
🍉 카드 리스트업
🍉 영화 상세 페이지
🍉 영화 카드 좋아요
🍉 영화 검색
🍊 아쉬운 점
시작에서 상태관리가 적절하지 않았던 것 같다.
한 컴포넌트를 다양하게 활용하고자 전체리스트와 search리스트를 같은 컴포넌트로 구현하였고, 하나의 상태로 관리하다보니 꼬이게 되었다.
처음부터 상태를 구분하여 진행했어야 했는데, 깔끔하지 않은 상태가 되었고, search 후 전체리스트로 갔을 때 상태를 다시 업로드해야하는 등의 불필요한 상태 업로드가 발생했다. 이는 전체 페이지가 리로딩되는 상황을 발생시켰다.
애초에 다른 상태로 관리했다면 route에 따라 다른 상태를 가져와 사용만하면 되었을 텐데... 잘못 판단했던 것 같다.
관리해야할 상태를 확실히 정리해두고 진행해야 할 것 같다.
중간에 계획을 수정하는 것은 너무나도 고통스러운 일이었다...
