인프런 커뮤니티 질문&답변

제로초님 안녕하세요.

[메뉴만들기] 강좌에서 팝업메뉴를 띄우고 닫는 과정에서 좀 더 상세히 알고싶어 질문드립니다.

 

1. Workspace > index.tsx

props 사용에 대한 이해는 조금 하고 있는데 

[ show와 onCloseModal ] props 사용 방식이 궁금한데요

props로 가져오기 위한 시작이 어디서부터인지와  {childern}의 사용순서를 알고싶습니다.

 

그리고 onCloseModal 이라는 props에는 onCloseUserProfile 코드를 적용하겠다는 뜻으로 이해하면 될까요?

보통은 onCloseMoal 이면  { onCloseModal } 로 사용하는데 여기서는 다르게 입력되어 이 과정이 궁금합니다. 

 

2. Menu > index.tsx

팝업메뉴 바깥 배경을 눌렀을 때, 닫히는 기능에 대한 질문입니다.

 

<CreateMenu> 스타일은 팝업된 메뉴인데 거기에 Click이벤트로 { onCloseModal }을 적용하면 팝업메뉴를 눌렀을 때, 모달창이 닫히는게 되고,

그 안의 <div>태그에 Click 이벤트로 { stopPropagation } 을 적용하면 <div>태그 내부를 눌렀을 때는 모달창이 닫히지 않는 것으로 이해하였습니다.

그런데 어떤 부분때문에 CreateMenu가 <div>태그를 제외한 배경으로 적용이 되어 배경을 눌렀을 때, 창이 닫히는 것인지 궁금합니다.

<CreateMenu/>에는 stopPropagation이 적용되어 있지 않기때문인 것 같긴한데 어쨌든 이벤트버블링은 Click 이벤트가 적용된 버튼이나 창을 눌렀을 때, 부모도 눌리게 되는 거라고 생각했었거든요. 그래서 배경에 Click 적용이 되는 과정이 궁금합니다.