props 응용

자식 컴포넌트의 모달에서 각 부모 컴포넌트에 있는 글제목 state에 맞게 제목 띄우기

1. html css로 미리 디자인

2. 현재 UI의 상태를 state로 만들기

• 부모에서 몇번째를 눌렀는지 자식 컴포넌트로 보내기 위해 그 동적인 상태값을 state로 만들어준다.

let [title, setTitle] = useState(0);

3. state에 따라서 UI가 어떻게 보일지 작성

• title==0이면 props.글제목[0]
• title==1이면 props.글제목[1] 이런식으로 코드를 작성하면 됨
• 따라서 부모 컴포넌트에서 만든 state를 자식 컴포넌트로 props 전송을 해주고 자식 컴포넌트에서 부모 컴포넌트에서 받은 props state를 사용한다.

function App (){
  let [title, setTitle] = useState(0);
  (생략)
  {
    modal == true ? <Modal title={title} 글제목={글제목} /> : null
  }
}

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

• 각각 글제목 누르면 setTitle(i) 해달라고 코드를 작성하여 title state 값을 변경시켜주면된다.
• onClick에 많은 함수 넣고 싶으면 함수들이 있는 곳에 중괄호로 묶고 ;으로 함수를 하나씩 나눠주기

function App (){
  return (
    <div>
      { 
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4 onClick={()=>{ setModal(true); setTitle(i); }}>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

• props 전송은 자식에서 부모로는 못 보내기 때문에 state 값은 컴포넌트들 중 최고로 높은 부모에게 만들어놔야된다.