01_react 간단한 팝업 만들기

우선 components 디렉토리 생성 후 Popup.js 파일 생성

거기에 styled-components로 팝업 디자인 

 

 

App.js에 팝업을 import 해서 불러온다

팝업 열기 버튼을 만들고 디자인한다

useState를 import한다.

- !!여기서 useState 특징은 상태값이 변경되면 다시 랜더링을 하는 특징을 갖고있다.

useState를 통해 popup, handlePopup을 만들고

팝업버튼을 누를때 handlePopup을 트루로 바꿔주고

popup이 true일때 <Popup>이 나올수 있게 함수 작성

<Popup>에 onClose라는 프로퍼티를만들어서 그안에 handlePopup을 받아온다

 

 

다시 Popup.js로 이동

onClose 값을 props로 받아온다

또한 팝업에 onClick함수를 작성하고 내용은 받아온 onClose값을 false로 바꿔준다

onClose => handlePopup => false => 팝업 닫힘