5월 14일 프리온보딩 12일차

오늘 한 일

기업 과제가 15일까지 마감이기 때문에 오늘까지 기능을 모두 구현했다!
지금와서 생각해보면 집중하는 시간을 늘릴 수 있다면 더 빠르게 개발할 수 있지 않을까 싶다.

공부한 것

개발 마무리를 했기 때문에 추가로 공부한 것은 거의 없었다.

setState 객체 수정

보통 setState로 변수를 관리할 때 일반 숫자나 bool형을 사용할 때가 많았다.
이번에 즐겨찾기를 등록, 해제해야 했기 때문에 객체 속성 일부를 수정할 필요가 있었다.
예시로 const [movie, setMovie] = useState({title: "title", id: 1, isBookmark: false}) 객체가 있을 때 isBookmark를 수정하고 싶으면 밑의 코드처럼 하면 된다.
setState({...movie, isBookmark: true})

스크롤 초기화

영화 재검색시 특정 부분만 리랜더링되기 때문에 스크롤이 그대로 있어서 문제가 났다.
처음에는 검색에서 가장 많이 나온 window.scrollTo(0, 0)를 사용했지만 소용이 없었다.
문제는 어떠한 dom의 css에 overflow-y를 이용해서 스크롤이 생겼기 때문이었다.
그래서 ref를 이용해서 특정 dom의 스크롤을 관리해야 했다.
먼저 관리하고 싶은 dom에 ref를 주고 원하는 이벤트 함수에 ref(가정).current.scrollTo({ top: 0 }) 코드를 사용하면 된다.