Front porject 6일차

오늘 한 것

1. 선수들의 상세페이지 (각 선수의 정보를 그대로 따와야함) 파라미터를 이용

2. Ticket 페이지에 홈경기일정 1주일정보를 가져와서  scroll기능을 사용하여 나타내기

 

 

선수들의 상세페이지를 어떻게 가져와야하나...이걸 젤 많이 고민한것같습니다. 선수들의 더미데이터는 있지만 다른 컴포넌트로 옮기는걸 어떻게해야하나에 대한 고민을 많이했는데 useLocation이라는 처음보는 react기능을 알게되어서 사용하게 되었습니다. 

 

일단 컴포넌트에 파라미터를 부여해서 각선수에 대한 고유한 정보를 Get해줘야하는데 그 상황에서 쿼리스트링을 하는방법이 useLocation()을 사용한다 

[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) (tistory.com)

[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용)

블로그는 다음을 참조하였다. 

 

일단 시작하기에 앞서 Route에 경로를 설정해줘야하는데 정해져있는 경로가 아닌 고유의 데이터를 설정할때는 :id 앞에 :를 사용해서 route에 설정을 해준다 

데이터를 다른 컴포넌트로 가져오는 방법은 의외로 간단했다. 

 

1. Link에 데이터를 변수에 지정해준다

 

자세히 보자면

 <Link to = {`/Proteam/Hitter/${Hit.NUM}`} state = {{Hit}}>

경로는 타자의 등번호로 지정을 해줘서 id값이 겹치지않게 경로를 지정해주고 state에 map함수에 정의해두었던 Hit을 가져오면서 전 블로그글에 적어높은 더미데이터의 한줄한줄의 값을 넘겨주는것이다! 

 

이런 방법이면 특정 선수를 클릭을 했을때 그 선수의 데이터를 state를 변수로 하여 Player 컴포넌트에 넘겨주면 된다는 것이다. 지금은 타자의 정보이기때문에 Player2에 데이터가 넘겨진다

 

2. useLocation 

useLocation을 통해서 변수로 받아왔던 state를 사용하여 데이터를 받아왔다. 

 

data에 정보를 넣어주고 data안에있는 정보들을 하나씩 꺼내서 만들어 놓은 레이아웃에 넣어주었다. 

 

 

그리고 css를 입히고 나서 결과를 보면 이러하다

아쉽게도 오늘은 티켓페이지를 다 만들지를 못하여서 내일로 미루기로 하였다.. 완성되면 다시올게요~