프론트엔드 첫걸음

modal을 portal 본문

개발 공부/React

modal을 portal

차정 2022. 7. 24. 03:56

위와 같은 위치의 모달이 있다.
이 모달은 제대로 동작하나 이는 시멘틱한 구조가 아니라고 한다.
중첩을 방지하기 위해서 모달 HTML 을 가능하면 최상위에 두라고 한다.

Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
가능하면 모달 HTML을 최상위 위치에 배치하여 다른 요소의 잠재적인 간섭을 방지하세요. 다른 fixed 스타일을 갖는 요소 내에 
중첩할 때 문제가 발생할 수 있습니다 . 

https://getbootstrap.com/docs/5.1/components/modal/

 

이 모달은 root와 같은 위치로 놓고 싶을 때 createPortal 을 사용할 수 있다.
ReactDom의 createPortal 함수는 실제 DOM의 다른 위치로 이동시키는 기능을 하는 브라우저 함수이다.

 

React 라이브러리 자체는 리액트를 DOM이 있는 환경에서 실행하는지, 네이티브 앱을 빌드하든지에 대해서는 신경쓰지 않는다. 
React는 state, props 관리하고 상호작용하는 소스코드 제어해서 화면을 보여주는 기능을 하는 라이브러리이며,
ReactDom은 브라우저에 대한 리액트용 어댑터라고 생각하면 된다.
(React-native에서는 react-dom 이 사용되지 않는다. ReactDom은 웹앱에서만 사용된다.)

 

createPortal을 사용하는 방법은 쉽다.

1.  index html에  모달을 갖다 붙일 div 태그를 달아준다.
2. 이동시킬 컴포넌트를 return 하는 곳에가서 index.html 에서 만든 div 태그의 아이디를 적어
어디로 이동시킬지 명시해준다.
createPortal은  첫번째인자로 렌더링 가능한 요소를 받고, 두번째 인자로 DOM 요소를 받는다.

 

index.html

<body>
  <div id="modal-root"></div>
  <div id="root"></div>
</body>

 

2.  

Modal.jsx

import classes from './Modal.module.css';
import ReactDOM from 'react-dom';

function Modal(props) {
  return (
    <>
      {ReactDOM.createPortal(
        <>
          <div className={classes.overlay} onClick={props.onCheck} />
          <div className={`${classes.modal} ${classes['h-100']}`}>
            <h4>{props.blogList[props.clickedIdx]}</h4>
            <p>날짜</p>
            <p>내용</p>
          </div>
        </>,
        document.getElementById('modal-root')
      )}
    </>
  );
}

export default Modal;

 

 

결과

 

[참고]
https://ko.reactjs.org/docs/portals.html

 

'개발 공부 > React' 카테고리의 다른 글

useEffect - 2. clean up 함수  (0) 2022.07.25
useEffect - 1. 사용 목적  (0) 2022.07.25
Styled Component 사용하기 ( props 사용해서 동적으로 스타일링 )  (0) 2022.07.22
조건부 스타일 설정  (0) 2022.07.20
input된 데이터 양방향 바인딩 또는 UseRef  (0) 2022.07.20
'개발 공부/React' Related Articles more