createPortal()
Portal은 뭐고 createPortal()은 뭘까 ?
Portal은 React에서 제공하는 기능으로 React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다.
createPortal()은 뜻 그대로 Portal을 생성해준다.
기본형은 createPortal(children, domNode, key?) 이다.
- children : 컴포넌트 및 요소
- domNode : Portal을 이용해 이동시킬 위치의 정보가 있는 요소.
- key : Portal에 key로 사용될 고유한 문자열이나 숫자이며 선택 옵션.
이제껏 진행한 ToDo 프로젝트에서 Portal을 사용해보자.
Modal
Protal을 사용하기 위해 프로젝트에 Modal 기능을 추가했다.
짜잔
Portal 설명에 앞서 구현한 기능을 먼저 설명하자면 input 필드에 아무것도 입력하지 않고 Add를 클릭할 경우 위 사진과 같이 Modal 창이 발생한다.
그럼 이 경우에 Portal이 왜 필요할까 ? 아래 사진을 보자.
현재 트리구조에서 Modal 컴포넌트는 App 컴포넌트의 자식으로 포함되어 있다.
그렇기 때문에 <div class='App'> 태그 안에 속하게 되며 부모의 스타일링에 영향을 받을 수 있다.
따라서 트리구조는 똑같이 유지 하면서 렌더링되는 위치만 이동시켜주는 Portal을 사용한다.
<body>
<div id="modal"></div>
<div id="root"></div>
</body>위와 같이 <div id='root'> 태그 옆에 modal이 자식으로 들어갈 태그를 생성해준다.
import classes from "./Modal.module.css";
import ReactDOM from "react-dom";
const Modal = (props) => {
const clickHandler = () => {
props.onGetError(false);
};
const ModalContents = () => {
return (
<div className={classes.modal_background}>
<div className={classes.modal}>
<p>Please input valid value.</p>
<button onClick={clickHandler}>confirm</button>
</div>
</div>
);
};
return(
ReactDOM.createPortal(<ModalContents></ModalContents>, document.querySelector('#modal'))
)
};
export default Modal;그후 ReactDOM 라이브러리를 import해 createPortal 메소드에 포탈을 통과시킬 컴포넌트와 컴포넌트가 도착할 태그를 선택해서 넣어주면 된다.
ReactDOM.createPortal(ModalContents, document.querySelector('#modal')) 이꼴로 적어놔서 틀린 부분 찾느라 애먹었다.... 반드시 첫번째 인자로 컴포넌트형식으로 넘겨주자 !
내가 만든 포탈이 이쁘게 잘 도착한 것을 확인할 수 있다 ~
검색해보니 ModalPortal 컴포넌트를 만들어 이동할 컴포넌트를 자식으로 넣어주는 경우도 있었다 !
아예 포탈 대문을 만들어서 넣어준 느낌
다음으로는 useRef에 대해서 알아보도록 하자
