React props

props로 자식에게 state전해주기

 

1.<자식컴포넌트 작명 = {state명}/>

-> 보통 똑같이한다.

2.자식컴포넌트에서 props 파라미터 입력 후 사용

 

주요코드

  function App() {
  ...
  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  ...

     {
        modal === true
        ? <Modal 글제목 = {글제목}></Modal> 
        // 작명 = {전송할state} 보통 똑같이 쓴다.
        : null
      }
   ...   
  }
      
      function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
  return(
    <div className="modal">
        <h2>제목 {props.글제목[0]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

---

전체코드

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState(0)
  let [modal,modal변경] = useState(false) 
  let posts = "군자 훠궈 맛집" 

  function 제목바꾸기(){
    var newArray = [...글제목]
    newArray[0] = '뉴욕'
    newArray = newArray.sort()    
    글제목변경(newArray)
  }


  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
     
      <div className="list">
      <h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>
      <p>4월 15일 발행</p>
      </div>
      <hr/>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[2] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[3] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <button onClick = {()=>{modal변경(!modal)}}>모달창</button>

      {
        modal === true
        ? <Modal 글제목 = {글제목}></Modal> 
        // 작명 = {전송할state} 보통 똑같이 쓴다.
        : null
      }
         
    </div>
  );
}

function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
  return(
    <div className="modal">
        <h2>제목 {props.글제목[0]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;