2023-04-13

미션: 한 개 한 개를 눌렀을 때 모달창이 각 다른,각 내용에 맞는 모달창으로 띄워라
힌트 : 모달 창 안의 제목도 일종의 동적인 ui, 동적인 ui 어떻게 만들라고 했더라?
리액트에서 동적인 UI 만드는 STEP
1. html css로 미리 UI 디자인을 다 해놓고 = 전등을 예쁘게 달아놓고
2. UI의 현재 상태를 state로 저장해두고 = 스위치랑 연결하고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 = 스위치를 on으로 놓으면 불이 켜지고 off로 놓으면 불이 꺼지도록

1번은 이미 되어 있으니 패스

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

function App() {

  let post = '김포 맛집';
  let [글제목, 글제목변경] = useState(['여자 코트 추천', '김포 우동 맛집', 'React 독학']);
  let [따봉, 따봉변경] = useState([0, 0 , 0]);
  let [modal, setModal] = useState(false); 
  let [title, setTitle] = useState(0); 
	//2단계, 스위치와 연결해보자
  //왜 괄호 안이 0이냐? 사실 상관 없음 ''빈문자열로 해도 결과는 같게 나오더라 임시로 0해놓은 것이다.
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <button onClick={()=>{
      let arrCopy  = [...글제목];
      arrCopy.sort();
      글제목변경(arrCopy);
      }}>가나다순 정렬</button>

      <button onClick={() =>{
        let copy = [...글제목]; 
        copy[0] = '남자 코트 추천'; 
        글제목변경(copy);
        }}>👸</button>
        
        // modal에서 쓰일 title state니까 여기서 전송보내야지
         { 
          modal == true ? <Modal title={title} 글제목={글제목} 글제목변경={글제목변경}/> : null //state에 따라서 UI가 어떻게 보일지
         }

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

function Modal(props){
  return(
    <div className="modal">
       <h4>{props.글제목[props.title]}</h4> 
       //3단계, 만약에 title == 0 이면 0번 글제목 보여주세요
        <p>2월 17일 발행</p>
        <button onClick={()=>{
          let copy = [...props.글제목];
          copy[0] = '남자 코트 추천';
          props.글제목변경(copy);
        }}>글수정</button>
    </div>
  )
}

export default App;

자, 이렇게 props까지 전송해줬네 그러면 글에 onClick 넣어주면 되겠다.
어려우니까 차근차근 해보자
우선,
0번 글을 클릭하면 title이라는 스위치를 0으로 바꿔주고
1번 글을 클릭하면 title이라는 스위치를 1로 바꿔주고
2번 글을 클릭하면 title이라는 스위치를 2로 바꿔주고
이 원리지?

<div>
      <button onClick={()=>{ setTitle(0) }}> 0번글 </button>
      <button onClick={()=>{ setTitle(1) }}> 1번글 </button>
      <button onClick={()=>{ setTitle(2) }}> 2번글 </button>
      <Modal 어쩌구/>
    </div>

이렇게 되겠다.
이걸 map을 이용해 반복해주자.
반복문 밑에 이거 추가

setTitle(i)

그러면 완성!