[TIL] 프리온보딩 10일차 - 220512

1️⃣ ref의 prop 타입 지정

interface Props {
  ref: React.RefObject<T>
}

 

 

2️⃣ NavLink의 isActive

activeClassName을 사용하려고 했는데 속성이 뜨지 않아서 구글링 해본 결과,

react v6부터 activeClassName은 사라졌다고 한다.

그 대신 isActive라는 것을 사용하여 className을 지정할 수 있다.

<NavLink to='/' className={({ isActive }) => cx({ [styles.isActive]: isActive })}>
      Movies
</NavLink>

 

 

3️⃣ 포스터가 없는 영화 처리

원래 movie.Poster값에 이미지 주소가 들어가 있는데 "N/A" 값이 있는 포스터가 없는 영화도 있었다.

그래서 아래와 같이 처리하였다.

 

💡 앞으로 해야할 일

📍 Movies Component

- 인피니트 스크롤 (이어서 진행!)

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

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

- 검색바 디바운싱

 

📍 Favorites Component

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