Props 응용

구현하는 기능과 배우는 컨셉

✔ 제목버튼을 눌렀을때 각각 다른 모달창 제목나타내기
✔ 버튼말고 <h3>에 직접 사용해보기

각각 다른 모달창 제목 나타내기

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

      <Modal 글제목={글제목} 누른제목={누른제목}/>
    </div>
  )
}

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

◾ 버튼 3개 만든다.
◾ 각각 버튼을 누르면 글제목이 수정되어야하므로 Modal라는 컴포넌트안에 제목부분을 props로설정
◾ 누른제목이 변수가 0이면 0번째 제목이 나타남
◾ 누른제목이 변수가 1이면 1번째 제목이 나타남
◾ Modal컴포넌트 안에 누른제목 props 설정
◾ 글제목[0] 글제목[1] 글제목[2]...

<h3> 글제목부분을 누르면 모달창 제목 변경시키기

◾ <h3>에서 {누른제목변경(0)}을 하드코딩해야하는 문제가생긴다.
◾ 여기서 map의 파라미터를 이용한다. i파라미터는 0,1,2씩 반복문이 돌면서 1씩증가하는 정수를 뜻한다.
◾ 이걸 이용해서 누른제목변경(i)로 설정해준다.

결론

◾ state 하나만들고
◾ state가 요런 상태면 UI를 이렇게 보여주세요 라는 코드를 짠다.
◾ 그리고 버튼등 이벤트를 실행할땐 state를 이렇게 바꿔주세요. 라는것을 추가하면된다
◾ state는 UI의 현재상태를 보관하는 저장소 역할이라 생각하면 편하다.