~0602 React - parameter 풍비박산

집에서 물이 샌다. 일일 수상가옥 체험을 하고 지금 정리를 마치고 차분하게 글을 쓰려한다.

어제, 수업을 마치고 10시 어간이 되어 나가 보니, 집이 물바다가 됐다.

처음에 냉장고 밑에서 물이 새서 아 냉장고 문제겠거니 조금 물 막고, 내일 사람을 불러야겠다. 했는데.. 그랬는데

상황이 심각해져서 무슨 여름시즌 한정 이벤트인지 물이 계속 나와서 거실을 흥건히 적셨다.

집이 1층인게 죄인지는 몰라도 오늘 아침에 배수구 수리업체에서 오셔서 조치해주고 가셨다.

아직도 쿰쿰한 냄새가 난다 하필 아버지 내려가셨을 때 이런 일이 벌어지다니 난 역시 아직 얼라야.

 

이런 나를 향한 세상의 억까 속에서도 글을 작성해보자. 고

 

react-router는 동적 url을 지원한다. (url에 변수를 투입 가능) 이를 통해 저번 시간 발만 담갔던 Detail페이지 구현이 가능해졌다.

영화 페이지에서 제목을 클릭하면 그 영화의 디테일한 정보를 보여주는 페이지로 이동하도록.

ㄴ> 위의 내용은 각 영화의 디테일한 정보를 보여주는 페이지가 고유한 url을 갖고 있어야 가능하다.

 

기본 페이지는(Home) http://localhost:3002/의 주소를 갖고 있기에 경로는 /. Detail 페이지의 경우 저번 시간까지는 /movie로

a영화의 제목을 눌러도, b영화의 제목을 눌러도 같은 url로 이동했다.

근데 이제! 위에서 말한 것처럼 :id를 추가해 각 제목을 누르면 고유한 url을 가져서 각자의 Detail을 보여주는 페이지로 이동이 가능하다. 그러기 위해 App.js에서 Route에서 경로를 :id를 붙인다 그냥 id를 붙일 경우 url에 id가 text 그대로 id가 들어가게 된다.

 

/movie:id로 Detail의 url의 경로를 변경

그다음에는 Home.js로 이동하자.

Movie컴포넌트에서 id를 props로 받고 있지못하므로 movie.id를 id로 받도록 적는다.

맞다 의문이 하나 생겼다 여기서 key prop 또한 movie.id의 값을 가지고 있는데 url에 사용하면 안 되나?

 

그리고 코드보다 보니까 key prop으로 받지도 않고 왜 썼지 하는데 뭐 나중에 쓰려나 하고 일단 내버려두었다.

변수명이 괜히 있는 게 아니니까 일단 내버려두자 는 개뿔

 

바로 콘솔 창오류 떴죠? map으로 가져올 때,  react에서 각 아이템은 고유한 key값 가져야 한다고 했잖아 능 지민규야

아무튼 이제라도 이해한 게 어디야 그렇지? 퍽이나 그치다.

 

Movie.js에 Movie함수에 prop으로 id 추가해주고, 다른 prop들과 마찬가지로 propTypes에 id를 추가해준다. 

prop은 오브젝트 일뿐, 우린 이걸 열어서 아이템 하나하나 사용한다고 생각하자.

Link도 변경하자 id값에 따른 각자의 url로 이동가능

Link에서의 경로도 수정하자. movie/고유한 id가 오도록

Link에서와 Route에서 path의 경로 표현의 차이 기억하자. ' ' 이게 아니고 ` `이거 인 것도 기억하자.

 

id는 정수형태, 그리고 isRequired또한 추가

 

url에서 바뀐 (변수) 값을 반환하는 함수가 있어 이것을 사용해볼 거다. useParams() Detail.js로 이동하자.

사용법은 변수 =  useParams() 이경우 변수에 변경된 props의 이름(Route에서 경로상 변경된 parameter명)과

그에 대한 값(클릭한 영화의 고유 id)이 들어가게 된다. 

x라는 변수에 useParams를 사용 후 콘-로를 통해 확인하자.

어... 캡처 안 했다. 아무튼 우리가 예를 들어 범죄도시 2를 클릭해서 범죄도시의 id(예:32375)가 추가된 url로 이동하고 

useParams에서는 변경된 id의 값 32375를 x에 id : 32375이런 식으로 저장해 우리에게 보여줄 것이다.

바보바보 진짜 바보는 바바보보라고 읽는다. 알지?

근데  접속 시 url에서 id를 한 번만 가져오는 게 좋으므로 -> 당연히 useEffect 떠오를 것이고 사용하자.

아 여기서 문제 저번에 이해 못 하고 넘어갔던 await sync 또 나옴 아직 안 봤는데 일단 적고,  다음 블로그는 강의 리뷰가

아니고 await sync이해 편으로 하자.

 

아무튼 지금 코드는 movie/id의 계정으로 이동해 id에 해당하는 영화의 정보를 api로부터 fetch 통해 json을 받는다.

근데 밑의 6~9의 코드가 async함수 내부 안에 있어야 한다고 한다. 6~9의 코드를 getMovies라는 함수로 만들고

useEffect의 함수 자리에 넣는다.

 

 

복잡하다 복잡해 꼭 await async공부후에 돌아오자 민규야.

아 그리고 line 4를 보면 x에 useParams함수의 값을 넣었었는데, 지금은 id자체에 넣는다.

line 7로 이동하면 fetch에서 id값이 지금 바뀐 {id}와 일치하는 영화에 대한 정보들을 불러온다. 끝 결과를 보자.

아 여기서 홈에서 했던 loading을 그대로 구현해주고 Api로 받아온 json을 아무렇게도 사용하지 않고 있음. 이 json을 state에 넣어준다면 영화의 상세정보들을 보여줄 수 있다. + link

 

영화제목 클릭 -> Detail페이지로 이동 console창을 보면 받아온 json데이터들(id와 일치하는 영화에 대한)

 

+외전 React 배운 지 한 달 반 정도 되었는데, 4월 말~ 5월 중순은 정말 나태하기도 했고, 해서 이제 강의 50 퍼 들었길래

아 진짜 서둘러야겠다.  했는데 오늘 자 강의 듣는데 '이제 여러분들에게 가르쳐야 할 것들은 거의 다 했습니다' 라는데  싸해서

강의 리스트 스윽 보니까 2020년 강의, 내가 듣는 강의 2021(리뉴얼)이 한 개에 다 있어서 50 퍼 가량이었던 거야요.

그냥 그렇다고.