[TIL] 프리온보딩 11일차 - 220513

1️⃣ Infinite Scroll

- Infinite Scroll을 구현하기 위해 react-intersection-observer 라이브러리를 사용하였고, import 하였다.

import { useInView } from 'react-intersection-observer'

 

- ref는 요소 지정하고, inView는 ref로 지정한 요소가 보이면 false였던 값이 true로 바뀐다.

const [ref, inView] = useInView()

 

- 그래서 useEffect()로 ref 요소가 보이면(inView 값이 변경되면) api의 page값을 +1 시켰다.

useEffect(() => {
    if (inView) setPage((prev) => prev + 1)
  }, [inView])

 

 

2️⃣ Search Bar 디바운싱

input element에 onChange 이벤트리스너를 등록하여 input에 값이 입력될 때마다 값을 저장해 api를 불러오는 식으로 하였는데 api가 너무 많이 불러와져서 'lodash'에 debounce를 사용하였다. debounce는 연속적인 함수 호출 중 마지막 혹은 맨 처음 함수가 호출된다. debounce를 통해 불필요한 api 호출을 줄여 퍼포먼스를 올렸다. 

 

- lodash 설치

yarn add @types/lodash

 

- setSearchWord를 통해 값이 변경되면 api가 호출된다.

const delaySetSearchWord = useCallback(
    debounce((value) => {
      setSearchWord(value)
    }, 300),
    []
 )

 

- input onChange 이벤트리스너에 delaySetSearchWord를 호출

(input value는 바로 값이 변경될 수 있도록 해야해서 onChange 이벤트리스너에 작성하였다.)

const handleChangeSearch = (e: ChangeEvent<HTMLInputElement>) => {
    delaySetSearchWord(e.currentTarget.value)
    setInputValue(e.currentTarget.value)
  }

 

 

3️⃣ 이미지 출력 부분 리팩토링

이전에 img src가 N/A값인 경우에만 not found를 출력해줬는데 img 주소가 있음에도 불구하고 이미지를 못찾는 영화가 있었다. onError라는 이벤트리스너를 이용하여 코드를 리팩토링하였다.

 

- 이미지를 찾았는지 찾지 못했는지 구분하기 위해 isFoundImg라는 state를 만들었다.

const [isFoundImg, setIsFoundImg] = useState<boolean>(true)

 

- isFoundImg가 true이면 이미지를 그렇지 않으면 Not found가 출력된다.

{isFoundImg
  ? <img 
      src='이미지 주소' 
      alt='이미지 설명' 
      onError={handleNotFoundImg} />
  : <div>Not found</div>
}

 

- img element에 onError 이벤트리스너를 걸어 찾지 못하면 isFoundImg를 false로 변환하였다.

const handleNotFoundImg = () => {
    setIsFoundImg(false)
}

 

💡 앞으로 해야할 일

📍 Movies Component

- list에 즐겨찾기인 것은 보이게 하기

- 모달 창 출력 (즐겨찾기 추가/해제)

- 마지막 pagination 에러 처리

 

📍 Favorites Component

- 즐겨찾기 리스트 없을 때 화면 생성

- 즐겨찾기 삭제 하는 순간 즉시 즐겨찾기 리스트에서 삭제

- 드래그 & 드롭하여 즐겨찾기 리스트 순서 변경