[React] CH10. props을 응용한 상세페이지 만들기

1. UI 만드는 법

• UI와 관련된 중요 정보들을 state로 저장해놓고, state에 따라서 UI를 수정

---

2. 버튼 누를 때마다 각각 다른 모달창 출력

• 부모의 state 사용을 위해 props 신고해야 함

function App() {

 let [누른제목, 누른제목변경] = useState(0);
 return (
    <div className="App">

      <button onClick={ ()=>{ 누른제목변경(0)} }>버튼1</button>
      <button onClick={ ()=>{ 누른제목변경(1)} }>버튼2</button>
      <button onClick={ ()=>{ 누른제목변경(2)}  }>버튼3</button>

      <button onClick={ ()=>{ modal변경(!modal) } }> 열고 닫기 </button>
      { 
         modal === true 
         ? <Modal 글제목={글제목} 누른제목={누른제목}/>
         : null
      }
    </div>
  );
}

function Modal(props){
  return (
    <div className="modal">
        <h2>{props.글제목[props.누른제목]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

---

3. <h3> 글제목 누르면 state 변경

• index를 하드코딩하지 말고 반복문돌 때마다 차례로 0,1,2가 되는 변수 사용
• map 반복문 쓸 때, 2번째 파라미터 i를 뒤에 추가 → 0,1,2... 하나씩 정수 증가하는 변수

function App (){
  return (
    <div>
      ...
      { 글제목.map(function(a, i){
        return (
        <div className="list">
          <h3 onClick={ ()=>{ 누른제목변경(i) } }>{ a } <span>👍</span> </h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) }
    </div>
  )
}

---

[ 참고 ]

 

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

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