-
선생님...
리액트 파트1 UI 제작패턴까지 강의 듣고
혼자 다시 첨부터 해보라 하셔서 코드 쥐어짜던 중에
약간 수정을 해봤는데 노 작동해요 ㅠㅠㅠ
두번째 컴포넌트인 Modal을 팝업창처럼 (그 왜 까만 바탕에 하얀 네모요) 띄워보려고 했는데,
(App 컴포넌트 안에) 띄우는 버튼은 작동하고
(Modal 컴포넌트 안에) 닫는 버튼은 작동하지 않아요. <--- !!!요거 고치고 싶어요!!!
뭐가 문제일까요 흐규흐규
function App() {
let [제목, 제목변경] = useState([
"커피 맛집",
"베이글 사냥",
"MBTI는 사이언스",
]);
let 포스팅 = 제목.map((a) => {
return (
<div className="post-container">
<h3>{a}</h3>
<p>2022년 2월</p>
<hr />
</div>
);
});
// 모달창 스테이트
let [모달, 모달변경] = useState(false);
return (
<div className="App">
{/* 상단 나브 */}
<div className="black-nav">
<h3>BLOG</h3>
</div>
{/* 모달창 */}
{모달 === true ? <Modal 모달={모달} /> : null}
{/* 포스팅 */}
{포스팅}
<button
onClick={() => {모달변경(true);}}>
모달
</button>
</div>
);
}
function Modal(props) {
return (
<div className="black-bg">
<div className="white-bg">
<h3>제목</h3>
<p>리액트 살려줘</p>
<button
onClick={() => {props.모달변경(false);}}>
close
</button>
</div>
</div>
);
}
<!--more-->
요거는 css예여
.App {
text-align: center;
position: relative;
}
body {
font-family: 'nanumsquare';
}
/* 상단 나브 바 */
.black-nav {
background-color:black;
color: white;
width: 100%;
font-size:30px;
font-weight: 600;
padding: 10px;
box-sizing: border-box;
}
/* 포스팅 */
.post-container {
padding: 0 30px;
margin-top: 30px;
text-align: left;
}
/* 모달 창 */
.black-bg {
background-color: rgba(0, 0, 0, .8);
width: 100%;
height: 100vh;
position: absolute;
display: flex;
justify-content:center;
}
.white-bg {
background-color: white;
width: 80%;
height: 300px;
max-height: 80%;
position: absolute;
top: 50px;
}
.white-bg button {
position: absolute;
bottom: 30px;
font-size: 17px;
padding: 10px;
}
- 답변은 로그인 후 가능합니다.