Enjoy Programming

detail 컨테이너 작업을 해주는데 아직 detail page에 대한 route가 없다. 라우터로 가서 route를 만들어주자 detail 페이지는 해당 영상의 id가 필요하다. id를 변수로 :id를 지정해주고 라우트를 만들어줬다. 잊지말고 컴포넌트는 임포트해주자. 그리고 :id를 URL로부터 어떻게 가져오는지 movie에 해당 id를 보여줄지 tv의 해당 id를 보여줄지 선택할 수 있게 작업해야한다. 먼저 header 라우터에서 withRouter를 사용했는데 이때는 라우터에 의해 호출된 컴포넌트가 아닌 항상 보여지는 컴포넌트이기에 location값을 얻기위해 사용했다. 하지만 router설정이 되어있는 detail의 경우 withRouter없이 링크를 클릭해 라우터에 접속함으로 인해 history..

앞서 home과 tv컨테이너의 로직은 거의 같다. tv컨테이너는 따로 작성할 필요가 없으니 search container로 넘어와서 포스팅한다. search컨테이너는 많은 로직이 들어간다. 첫번쨰로는 handleSubmit을 한다. react에서 form다루는 거라고 생각하면 된다. form에서 text를 인풋하고 submit하면 handleSubmit하는 거~~~ 잠시 react.doc을 살펴보면 react에서 html form element는 form element자체가 내부의 state를 가지기 때문에 react의 다른 Dom element와 조금 다르게 동작한다고 한다. 기본적으로 이 폼은 사용자가 submit하면 새로운 페이지로 이동하는 기본 html폼 동작을 수행한다. react에서 동일한 동..

앞서 기본 파일들을 만들었고 이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 nowPlaying, upcoming, popualr를 찾고 그게 끝나면 state값을 설정해준다. 에러가 있으면 loading을 false로 변경하게된다. try,catch,finally구문으로 finally에서는 error가 생기든 성공적으로 데이터를 받아오든 loading은 false로 바꿔준다. 그리고 catch에서는 error가 발생시 출력할 문구를 만들어줬고 try구문에서는 moviesApi를 import해주고 moviesApi에 nowplaying을 async await을 활용해 받아오고 콘솔창에 찍어주면 성공적으로 data가 온다. async await을 안쓰면 언제나 그랬듯 promise pending상태가..

이제 할 일은 만들어 놓은 api들의 데이터를 화면에 뿌려줘야 한다. 이번에 접근 방식은 리액트 컴포넌트 코딩패턴인데... container presenter pattern이라고 불린다. 앞서 배운 class컴포넌트와 state방식은 작은 데이터의 경우 잘 되지만 data의 양이 많아지면 힘들다고 한다. 이 방식은 컨테이너는 데이터를 가지고, state를 갖고 api를 불러온다. 모든 로직을 처리후 프레젠터는 데이터들을 보여주는 역할을 한다. 프레젠터는 state도 없고 api에 대해 모르고 클래스도 없는 just function component이다. 프레젠터는 스타일이고 컨테이너는 data! 이제 모든 컨테이너와 프레젠터를 생성하자. 각 라우터에 맞게 먼저 Routes 폴더에 각 라우터명의 폴더를 생..