[React] props를 응용한 상세 페이지 만들기

목표

위 사진에서 보이는 목록에서 제목을 클릭하면, 그와 관련된 정보를 띄우는 모달이 하단에 출력되도록 하겠다.

현재는 목록의 어떤 제목을 클릭해도 아래와 같이 첫번째 제목인 '나_Hi'만 출력되는상태이다.

 

코드 작성 순서

1. state 생성

let [indexNum,setIndexNum] =useState(0);

동적 UI 변동을 줘야하므로 state를 사용한다.

 

2. state 상태 함수를 이용하여 indexNum state 값 변경

{
        //a는 하나씩, i는 0부터 반복될때마다 1씩 증가하는 수
        글제목.map(function(a,i){
          return(
            <div className="list">
              <h4 onClick={()=>{setModal(!modal);
              setIndexNum(i)}}>{a}
                <span onClick={()=>{
                  let copy=[...따봉]
                  copy[i]=따봉[i]+1
                  따봉변경(copy)}}>👍</span>{따봉[i]}
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      }

setIndexNum 함수를 사용하여 제목을 클릭할 때마다 그에 알맞은 state로 변화를 준다.

 

3. 자식 컴포넌트에게 인덱스 전달을 위한 state 전송

{
    modal==true?<Modal color={'skyblue'} indexNum={indexNum} 글제목={글제목} 하이함수={Hi} 글제목변경={글제목변경}/>:null
}

index state를 전송한다.

 

4. 자식 컴포넌트에서 받아온 인덱스 관련 state 사용

function Modal(props){
  return (
    <div className="modal" style={{background:props.color}}>
      <h4>{props.글제목[props.indexNum]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={()=>{
        let copy=[...props.글제목]
        copy[props.indexNum]='여자 코트 추천'
        props.글제목변경(copy)
      }}>글수정</button>
    </div>
  )
}

 

결과

 

목록에서 2번째 제목을 클릭했을 때로, 모달에도 이와 관련된 내용이 출력되는 것을 볼 수 있다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌