- 간단 요약
모달창같은 경우
리액트에서 제공하는 Create Portal을 이용하면 좋다는 피드백이 있어서 찾아보았다.
사용방법은 매우 쉬웠는데
return 해줄 컴포넌트를
-------------------------------------
- DETAILS
리액트 v16에서 도입 됐는데,
사실 그냥 구현해도 되는걸 좀 편리하게 빼놓은 것에 불과하다.
공식문서상 설명은 이렇다.
ReactDOM.createPortal(child, container첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다.
두 번째 인자(container)는 DOM 엘리먼트입니다.
두번째 DOM인자로 body를 넣어준 이유는 아래와 같다.
(진짜 코드는 아니고 portal로 modal을 만들면 브라우저 상에서는 저런 식이 됨)
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id='modal'></modal>
</body>
</html>와 같이 들어간다.
원래라면 App이 다 <div id='root'>의 자식으로 들어가는데
portal을 쓰면 우리가 지정해준 document.body에 들어가서 저렇게
root와 부모자식이 아니라 형제로 modal이 생성된다.
이름이 portal인 이유도 여기서 나오는데 root에 있는 자식요소들을
포탈을 뚫어서 <div id='modal'>에서도 쓰도록 만들어주기 때문이다!!
https://velog.io/@dfd1123/react-create-portal-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
여기 보면 코드를 잘 설명해주셨고,
다른기능은 다 제외하고 portal을 만드는 가장 골조가 되는 코드로만든 내 코드도 첨부한다.
'프로그래밍 공부내용 > 리액트(React)' 카테고리의 다른 글
| 라우터 기본 사용법과 link와 navLink의 차이 (0) | 2022.05.09 |
|---|---|
| 리액트와 순수함수 (0) | 2022.05.05 |
| 절대경로로 import 하기 (0) | 2022.05.04 |
| 리액트의 state와 보안 (0) | 2022.05.04 |
| 간단한 예제.. 신용카드 예제 하면서 만료일 등록 로직에 (0) | 2022.05.04 |
