React props 추가

완성창

- 변경 자주하는 내역들 props로 전달하기

컴포넌트안에 props두개 전달 당연히 가능

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

- map함수 사용하면 첫번째 매개변수말고 index도 가지고 있다.

{
        글제목.map(function(글, i){
          return(
            <div className='list'>
              {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/}
              <h3 onClick={ ()=>{ 누른제목변경(i)}} > {글} <span onClick={() => {따봉바꾸기(i)}}>🥰좋아요!</span> {따봉[i]}</h3>
              {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */}
              <p>1월 10일 발행</p>
              <hr/>
            </div>
          )
        })
      }

- props한 외부 컴포넌트 문법에서 사용하기

function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
  return(
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2> 
        {/* 내가 방금누륵제목의 숫자를 넣을 수 있게 하자 */}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

이런식으로 props안에 전부다 들어있으니 거기서 찾아서 사용하면된다.

 

 

- 전체 소스

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

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState([0,0,0,0])

  let [modal,modal변경] = useState(false) 
  let posts = "군자 훠궈 맛집" 
  let [누른제목,누른제목변경] = useState(0);

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

  function 따봉바꾸기(index){
    var newArray = [...따봉]
    newArray[index] = newArray[index] + 1
    따봉변경(newArray)
  }


  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
     
      

      {
        글제목.map(function(글, i){
          return(
            <div className='list'>
              {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/}
              <h3 onClick={ ()=>{ 누른제목변경(i)}} > {글} <span onClick={() => {따봉바꾸기(i)}}>🥰좋아요!</span> {따봉[i]}</h3>
              {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */}
              <p>1월 10일 발행</p>
              <hr/>
            </div>
          )
        })
      }

      {/* alt + shift + down키 '행'복사 */}
      {/* <button onClick={ ()=>{ 누른제목변경(0)}}>버튼1</button>
      <button onClick={ ()=>{ 누른제목변경(1)}}>버튼2</button>
      <button onClick={ ()=>{ 누른제목변경(2)}}>버튼3</button>
      <button onClick={ ()=>{ 누른제목변경(3)}}>버튼4</button> */}
    
      <button onClick = {()=>{modal변경(!modal)}}>모달창</button>

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

function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
  return(
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2> 
        {/* 내가 방금누륵제목의 숫자를 넣을 수 있게 하자 */}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;