React className 으로 모달,on and off 만들기

보통 함수형 react부터 공부한 나는 modal이나 on/off 기능을 만든다 치면

 

useState에 true,false혹은 문자열 상태에따라서 조건문이나 삼항연산자로 만들곤 하는데

 

오늘 어쩐일인지 css속성을이용해 display:none으로 할 수있냐고 물어보는 팀원이 있었다.

 

결론은 될거같아서 해봤는데 되더라.

 

App.css

.true{
	display: inline-block;
}

.false{
	display: none;
}

이와같이 클래스명이 true면 보이고 false면 안보이게.. css스타일을주고

 

App.js

import { useEffect, useState } from 'react';
import './App.css';

function App() {
  

  let [display,Setdisplay] = useState('true')

  return (
    <>

 

    <div className={display} onClick={()=>{Setdisplay('false')}}>
      이거 모달로 보이기..?
    </div>

    </>
    
  );
}

export default App;

이와같이 적용... 허허... 근데이게 뭐가다른걸까..? 렌더링이 다르려나? 아닐거같은데 흠...... 여튼..!

 

우선 기록해본다.