[Netflix] [ TV 프로그램 / 영화 ] 출력 형태 변경, Search 기능 구현

결과

Search (검색) 기능을 만들었다.

[ TV 프로그램 / 영화 ] 출력 형태를 스크롤에 따라 새로운 데이터를 불러오기 좋게 변경하였다.

홈, Tv, 영화, 검색 page에 있을때 border-bottom 값에 붉은색을 추가하였다.

 

TV

영화

Search

---

오류

 

계획은 헤더 부분에서 찾을 제목을 입력하고 form을 제출하면 search 페이지로 이동하면서 결과를 출력하고 싶었다.

막힌 부분

• form을 제출할때 /search로 이동하려면? ([해결] action="" / method="")
  → input의 value값을 받아올 수 없다. 
  → action="/search/{input_value}"를 통해 URL에서 String 분리를 할까 했는데 어거지로 불러오는 기분이 들어서 우선은 다른 방법을 찾아보기로 했다.
  
  
• input에 입력된 value를 props로 전달해주어야 한다. ([오류] 결과가 헤더 부분에 출력)
  → props로 전달이라는 말이 맞는지 모르겠다, 입력된 값을 search.js에서 알아야한다
  
  
• Link to 를 이용하면? ([오류] 페이지 이동만 된다)
  →  input 창에 입력하기전에 이동이된다

 

---

해결 방안

어제 오늘 여러 시도를 해보았지만 Redux를 사용하지 않고는 방법이 없을것 같다고 생각했다.

아니면 상위 컴포넌트에서 모든 처리를 한 뒤 하위 컴포넌트로 props를 내려주면 될 것 같다.

아직 익숙한 방법은 아니라서 다른 파일에서 해본 뒤 적용할 예정이다.

 

---

계획

Search에 대한 해결을 계속 생각해볼 예정이다.

Detail page를 라우터가 아닌 Boolean 값으로 페이지 이동 없이 데이터를 나타내줄 예정이다.

Detail page에 출연진을 출력해 줄 예정이다.

 

 

---

코드

https://github.com/ssc9811/scflix-hook

GitHub - ssc9811/scflix-hook: TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix