728x90
반응형
day2 test4
import React, { useState } from 'react';
const Test04 = () => {
const[visible, setVisible] = useState(true)
const onShow = () => {
setVisible(true)
}
const onHide = () => {
setVisible(false)
}
const ontoggle = () => {
setVisible( !visible )
}
return (
<div>
<button onClick={ onShow }>보이기</button>
<button onClick={ onHide }>숨기기</button>
<button onClick={ ontoggle }>{ visible ? '숨기기' : '보이기 '}</button>
<hr/>
{
//visible ? <div style={{width: 300, height: 300, margin: 20, background: 'hotpink'}}></div> : null
visible && <div style={{width: 300, height: 300, margin: 20, background: 'hotpink'}}></div>
}
</div>
);
};
export default Test04;
/*
조건 연산자
조건? 참 : 거짓
조건 && 참
*/
React day2 고양이 사진들 가져오기!
src
component
cat.js
catData.js
catList.js ===>map을 사용해서 catitem을 돌리기
catItem.js ==>이미지 1개 (~~DTO.java) DTO같은 1인분의 역할하는거
day03 test01 id랑 비번 개발자도구를 통해서 입력되는 값이 보여지는 것
그리고 비번이 6자리 이상 일 경우에만 로그인이 되고 6자리 이하로 입력되면 로그인 버튼이 안 눌린다.
day03 test02 checkbox 이벤트 주는거 그래서 트루이면 파랑,false면 분홍
day03 -test03 팝업창 모달창 열기
728x90
반응형