<Modal>
=> 이것도 일종의 js 표현식이다. 그러므로 if 문 등 온갖곳에 다 들어갈 수 있다.
=> 그래서 if 안에 넣는다.
if 조건() {
<Modal />
} else {
<div>
}
=> 요래 할 수 있겠다
=> 근데 쌩 if 를 쓰면 인식을 못함
=> 그래서
{
if 조건() {
<Modal />
} else {
<div>
}
}
=> JSX로 중괄호를 만들어 넣는데, 이것도 안됨
=> 그래서 if 대신에 바로 삼항연산자, 삼항연산자는 중괄호 안에 쓸 수 있다.
{
1 < 3 ? console.log('맞아요') : console.log('들려요')
}
=> 이렇게 쓰여지는 삼항연산자 조건 ? 맞 : 틀
{
1 < 3
? console.log('맞아요')
: console.log('들려요')
}
=> 주로 이렇게 if문처럼 표현을 한다.
=> 뭔가 promise 같기도
{
1 < 3
? <Modal />
: null
}
=> null은 관습, 텅빈 HTML이라는 뜻
=> 그럼 어떤 조건을 이용해야할까?
=> 이것도 정해진게 있다.
=> state에 상태 같은것을 보관한다.
=> 내 예상과 맞네 Vue랑 동일해~
<div className="list">
<h3 onClick={ ()=>{ modal변경(modal=true) } }>{ 글제목[1] }</h3>
<p>2월 17일 발행</p>
<hr />
</div>
=> 내가 한거
=> 맞다 근데 여기서 어차피 modal변경함수는 modal에 영향을 끼치는거니까
<div className="list">
<h3 onClick={ ()=>{ modal변경(true) } }>{ 글제목[1] }</h3>
<p>2월 17일 발행</p>
<hr />
</div>
=> 이렇게만 작동시켜도 됨
=> 이제 true면 false로 false면 true로가 나올때구만
=> 역시 ㅋㅋㅋ 숙제로 냈다.
<button onClick={
()=> {
if (modal === true) {
modal변경(false)
} else {modal변경(true)}
}
}>모달</button>
=> 내가 짠 코드 잘 돌아간다
=> 근데 ;;; 나도 뻔히 아는 방법인데 생각을 못함 내가 아주 원시적이였다면 이 정답은 일반적인 정답 ...
function App (){
let [modal, modal변경] = useState(false);
return (
<div>
<button onClick={ ()=>{ modal변경(!modal) } }> 열고닫는버튼 </button>
{
modal === true
? <Modal />
: null
}
</div>
)
}
=> ! ;;; 당연히 알았는데 생각을 못했다..... 바보 ..