props를 이용해 상세페이지 만들기

정승원·2022년 4월 16일
0

react

목록 보기
7/16
post-custom-banner

일반적으로 modal창을 통해 상세페이지를 만드는 방법이다 !

  1. state에
    글제목 ['남자코트추천', '강남우동맛집', '파이썬독학'] 저장
    누른제목 useState(0) 저장 (몇번째 제목인지 알기 위해)

  1. map 반복문을 통해서 반복되는 html 제작

  1. props전달하기 위해서 전송을 원하는 곳에 작명={데이터이름} 작성
    글제목과 몇번째 글제목인지 받아오기 위해 아래와 같이 작성
    *보통 전송할 데이터와 작명이름을 같게 작성함

  1. 만들어 놓은 modal 자식컴포넌트의 파라미터에 props입력과 원하는 곳에 props.작명 적기
    위에 반복문으로 만들어 놓은 제목을 누르게되면 저장된 state에 글제목이 몇번째인지 받아와서 나타내줌
    => {props.글제목[props.누른제목]}

5.마지막으로 해당하는 제목을 누르게 되면 누른제목번호의 데이터를 가지고와서
제목이 modal창에 나오게 됨
{누른제목번호(i)}를 입력함으로써 누른제목 useState( ) 의 데이터가 변하게됨
=> ( 해당 제목이 몇번째 인지 알기 위해서 작성 )
1번째 제목을 누르면 0
2번째 제목을 누르면 1
.
.
.

결과

첫번째 남자코트추천 제목을 눌렀을 경우

두번째 강남우동맛집 제모을 눌렀을 경우

끝!

profile
Hell-o wo-orld
post-custom-banner

0개의 댓글