저번에 로그인기능을 다 마무리 지어놓고
이번시간에 유저정보(이름)를 가져오는것과 상세페이지까지
만들어 본 뒤 연습은 여기서 마무리짓고
제대로 된 포트폴리오를 하나 만들어보면되지않을까싶다.
일단 오늘 할 상세페이지만들기
일단 상세페이지제작은 이미 완성한 상태이고
그것에 대해 기록만 해두고 넘어가려한다.
상세페이지는 당연히 리액트라우터에 useParams 기능을 사용해서 완성을해주었고
그에대한 코드작성은 아래와 같다.
- 일단 Routes해준곳에 상세페이지를 Route해준다.
-
Route로 상세페이지(Detail.js)를 넣어뒀으니 List안에 요소를 구성해준 Read.js를 Link태그를 사용해 디테일페이지로 넘어갈 수 있게 만들어준다.
-
링크까지 연결해주었으니 /list/id값 으로 들어가면 그 상세페이지로 넘어가게된다
이러한 id값을 가지고있는데 이건 파이어베이스에서 지정해준거같다.
-
이제 url에 있는 id값을 useParams로 가져와주자.
useParams를 위 처럼 사용해주면 id에는 url에 있는 id값이 들어간다. -
id값을 얻었으니 많은 데이터들 사이에서 그 id값과 같은 데이터를 뽑아오면된다.
데이터값을 뽑아오는건 위처럼 작성이되었는데
useEffect로 페이지가 마운트되었을 때 데이터베이스에 있는 모든자료를 detailItem이라는 state에 저장해주고
detailItem에서 find함수를 사용해 같은 아이디값을 가진 데이터만 뽑아오게금 만들어주었다.
그리고 같은 아이디값을 가진 데이터를 뽑아왔으니 그걸 이용해 화면을 구성해주면 완성이었다.
이제 글 목록중에서 그 아이템을 선택하면 상세페이지에 잘 나타나는걸 볼 수 있다.
상세페이지는 여기서 마무리지으면 될거같다.
이제 로그인한 정보를 가져오면된다.
로그인했을 때 보여줘야할 화면이 있을 수 있다.
예를들어 마이페이지같은
그런데 로그인한 정보는 아직까지 화면에 보여주진않았다.
로그인 한 정보의 이름을 가져오는 코드를 배워왔다.
auth를 사용하면되는데 그중 onAuthStateChanged를 사용하면됐다.
저 res값에는 이제 유저의정보가 들어가는듯했다.
그래서 res.displayName으로 뽑아보면
회원가입할때 넣어뒀던 유저의 이름이 나타난다.
userName이라는 state를 화면에 출력해보면 로그인했을 때
header에 나타나게끔 해주었다.
아무거나로 막 회원가입을 해준다음 로그인을해보면
로그아웃 옆에 유저의 이름이 나타나는걸 확인해볼 수 있었다.
이제 이걸가지고 마이페이지기능이나
로그인했을 때 보여줄 화면이나 그런걸 구현해볼 수 있지않을까싶다.
파이어베이스 연습은 여기까지
여기까지만 연습해보는걸로하고
이제 나의 포트폴리오로 사용할걸 만들어보면 되지않을까싶다.
