react modal 코드 실행 시점, child content 마운트/언마운트 시점

react modal 코드 실행 시점, child content 마운트/언마운트 시점

 

react modal 설명

---

modal은 다른 페이지 등으로 이동없이 현재 페이지에서 새로운 컨텐츠를 보여줄 수 있는 UI 요소입니다.

 

react lifecycle

---

1. Mounting phase : element가 가장 처음 렌더링되는 단계 : DOM에 새로운 element 생성

 

2. Updating phase : 마운트된 element가 업데이트되는 단계 : DOM은 그대로

 

3. Unmounting phase : 마운트된 element가 DOM에서 제거되는 단계 : DOM에 element 제거

 

DOM : Document Object Model, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스

react component 코드 실행 시점

---

component가 mount될때 코드가 실행됩니다. (심지어 보이지 않더라도)

 

modal 의 경우

---

modal component는 전체 페이지가 시작될때 mount됩니다.

즉 페이지 시작 직후 바로 코드가 실행됩니다.

 

그러나 modal안의 자식 컨텐츠(child content)는 아직 mount되지 않았습니다.

child content는 modal이 open되었을때 mount됩니다.

 

즉, child content의 코드가 실행되는 시점은 modal이 open될때 입니다.

 

 

예시 코드

const ChildContent = ({})=>{
    console.log("i will be mounted when modal open");
    return <p>i am child</p>
}

const MyModal = ({open, onClose})=>{
    console.log("i will be mounted when page start");
    
    return <Modal open={open} onClose={onClose}>
        <ChildContent/>
    </Modal>
}

MyModal의 console.log는 페이지가 시작할때,

ChildContent의 console.log는 MyModal이 open될 때,

mount되고 코드가 실행됩니다.

 

 

참조

---

 

React Lifecycle

 

React Modal component - Material UI