코딩애플_props, 부모의 states 가져다 쓰기

적용 code

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

function App() {
  
  let [title, titleFunction] = useState(['React','HTML','CSS']);
  let [count, countFuction] = useState(0);

  let [modal, stmodalFunction] = useState(false);

  // function titleChangeFunction(){
  //   let changedtitle = title.slice();   //[...title] 도 가능, deep copy 가 된다.
  //   changedtitle[0] = 'React - 1';
  //   titleFunction(changedtitle);
  // }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className='list'>글제목
        <h3>{title[0]}  <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
        {/* <button onClick={titleChangeFunction}>Title Change</button> */}
        <p>2월 17일 발행</p>
        <hr/>       
      </div>

      <div className='list'>글제목
        <h3>{title[1]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div> 

      <div className='list'>글제목
        <h3 onClick= { () => {stmodalFunction(!modal) }  }> {title[2]} </h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div>


      {
      title.map(function(index){
        return(<div className='list'>글제목
        <h3>{index}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
        </div> 
        )
      })
      }

      {
        modal === true
        ? <Modal title = {title} />
        : null
      }

    </div>
  );
}

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

export default App;

풀이

function App() {
  
let [title, titleFunction] = useState(['React','HTML','CSS']);
}

return (
{
        modal === true
        ? <Modal title = {title} />   // 작명 = {전송할데이터}
        : null
      }
)

function Modal(props){    
// 전송받는 곳에 'props' 라고 하면서 data를 받는다.
  return (
      <div className="modal">
        <h2>{props.title[2]}</h2>  
        // 전송받은 데이터 props 의 작명 을 넣어준다.
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}