리액트 간단한 모달창 만들기

메인페이지인 App 컴포넌트와 모달창으로 사용될 Modal 컴포넌트를 사용할 것이다.

 

 

 

click State를 기본값을 false로 설정한다. 그리고 한 번 클릭할 때마다 click 값이 변하게 하는 onClickHandler를 만든다. 그리고 '클릭' 버튼의 onClick 이벤트에 적용해 주면 된다.

 

'클릭' 버튼을 누를 때마다 click State 값이 변할 것이고, 이에 따라 모달창의 렌더링 여부가 결정될 것이다.

 

이를 위해 삼항연산자를 통해 click값에 따라 다르게 렌더링 되도록 했다. click이 true일 때 렌더링되는 Modal 컴포넌트를 살펴보자

 

 

 

Modal 컴포넌트

특별한 내용은 없고, 부모컴포넌트로부터 onClickHandler를 물려받아서 ‘닫기’ 버튼에 적용시킨다. 

 

 

 

모달창은 부모 컴포넌트 기준으로 한가운데 나오도록 설정할 것이다.

모달창이 나올 App 컴포넌트의 position을 relative로 설정해 놨다.

 

 

 

Modal.css

position를 absolute로 설정해 주고, top : 50%, left : 50%, transform : translate(-50%, -50%); 를 설정해 주면 부모요소인 App 컴포넌트 기준으로 정 가운데에 모달창이 나오게 된다.

 

 

 

예에 김태리 최고

이렇게 하면 기본적인 모달창 구현은 끝났다.

 

 

 

 

 

추가적으로 모달 창이 나왔을 때, 뒤의 배경이 흐리게 설정해 주면 된다. 

모달 컴포넌트 전체를 포함하는 Modal-container라는 div 박스를 만든다.

 

 

 

이전과 같이 부모요소인 App를 기준으로 설정하기 위해서 absolute를 설정해 주고, 그림자를 설정해 주면 끝이다.

 

 

 

모달창이 나왔을 때 뒤의 배경이 흐려지는 것을 확인할 수 있다.