[코딩애플]react props

props로 별걸 다 전송 가능.

('yellow') 말고 "yellow"로 전송도 가능.

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

function App() {


  let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천'])
  let [좋아요, set좋아요] = useState([0, 0, 0, 0]);
  let [modal, setModal] = useState(true);
  let [index, setIndex] = useState(0);

  //1. array의 자료 갯수만큼 함수안의 코드 실행
  //2. 함수의 파라미터는 array내부의 자료임.
  //3. return에 뭘 적으면 array로 담아줌.

  return (
    < div className="App" >
      <div className="black-nav">

        <h4>블로그</h4>
      </div>

      <button onClick={() => {
        //1 depth 깊은복사
        let 제목정렬 = [...제목].sort();
        제목변경(제목정렬);
      }}>제목 정렬!</button>

      <div className='list'>
        <h4 onClick={() => {
          setIndex(0);
        }}>{제목[0]} <span onClick={() => {
          set좋아요(좋아요 + 1)
        }}>👍</span> {좋아요} </h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4 onClick={() => {
          setIndex(1);
        }}>{제목[1]}<span onClick={() => {
          //1 depth 깊은복사
          let copy = [...제목];
          copy[1] = '다람쥐 코트 추천';
          제목변경(copy);
        }}>🐿️</span></h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4 onClick={() => {
          modal ? setModal(false) : setModal(true);
          setIndex(2);
        }}>{제목[2]}</h4>
        <p>2월 11일 발행</p>
      </div>

      {
        제목.map(function (a, i) {
          return <div className='list' key={i}>
            <h4>{a} <span onClick={() => {
              let copy = [...좋아요];
              copy[i] = copy[i] + 1;
              set좋아요(copy);
            }}>👍</span> {좋아요[i]} </h4>
            <p>맵 반복 생성 No.{i}</p>
          </div>
        })
      }

      {
        //삼항연산자만 가능.
        modal ? <Modal 함수={() => {
          let 임시제목 = [...제목];
          임시제목[0] = '여자 코트 추천';
          제목변경(임시제목);

        }} index={index} 제목={제목} /> : null
        //증괄호 내부에 하나의 조건식만 가능.
      }

    </div >
  );
}

const Modal2 = () => { };
//이렇게도 가능암.

function Modal(props) {
  return (
    //return소괄호 안에는 항상 병렬 금지
    //묶는용으로 <></>fragment문법
    <div className='modal'>
      <h4>{props.제목[props.index]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={props.함수}>글수정^^</button>
    </div>
  )
}

//function APP(){}내부의 변수르 가져다가 사용을 할 수가 없음.
// props로 가능하나 귀찮.

export default App;