코딩애플_modal 창 켜고 끄기

변경 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>

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

    </div>
  );
}

function Modal(){
  return (
      <div className="modal">
        <h2>제목</h2> 
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

풀이

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

true 면 모달창이 보이고 false 면 없어지게 하는 states 변수 modal을 만든다.

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

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

• states 변수를 생선한다.

• 초기에는 안보여야 하므로 false 로 지정한다.

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

• 클릭하는 대상에게 가서 onClick 실행 코드를 적어준다.

• !modal 이라 써서 현재 모달 데이터를 반대로 바꿔주게끔 한다.
  값이 true, false 이기에 적용가능한거 같다.