[React] 7. props

부모 state -> 자식 state

props 문법

1. 자식컴포넌트 작명=

{
        modal === true? <Modal 작명={글제목}/> : null
      }

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

}

import { useState } from 'react';
import "./App.css";

function App() {
  let [글제목] = useState(["남자코트 추천", "강남 우동맛집", "파이썬독학"]);
  let [따봉, 따봉변경] = useState(0);
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      {
        글제목.map(function(a,i){
            return(
              <div className="list" key={i}>
                <h4 onClick={()=>{setModal(true); setTitle(i)}}>{글제목[i]}
                <span onClick={() =>{ 따봉변경(따봉+1) } }>👍</span>{따봉}</h4>
                <p>2월 17일 발행</p>
              </div>
            )
          })
      } 

          <button onClick={()=>{ setTitle(0) }}>글제목0</button>
          <button onClick={()=>{ setTitle(1) }}>글제목1</button>
          <button onClick={()=>{ setTitle(2) }}>글제목2</button>
      
      {
        modal === true? <Modal title={title} 글제목={글제목}/> : null
      }

    </div>
  );
}

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