React에서 ReactDOM.createPortal() 사용
-
React에서
ReactDOM.createPortal()을 사용하여 숫자 생성 앱 만들기 -
React에서
ReactDOM.createPortal()을 사용하여 CSS 오버레이 효과 만들기 - 결론
React는 깨끗하고 이해하기 쉬운 코드를 작성하는 가장 좋은 방법을 고안하는 것입니다. React의 createPortal() 함수는 그러한 방법 중 하나입니다.
ReactDOM.createPortal() 함수는 긴 코드 줄을 섹션으로 분할하는 편리한 방법입니다. 각 구성 요소를 간략하게 만들기 위해 상위 구성 요소에서 하위 구성 요소를 분리할 때 createPortal() 함수는 효율성을 잃지 않고 두 구성 요소를 연결합니다.
또한 부모 컴포넌트보다 먼저 자식 컴포넌트의 콘텐츠를 렌더링하려면 ReactDOM.createPortal()을 사용할 수 있습니다. 즉, 간단한 앱을 빌드하여 이 기능을 사용할 수 있는 방법을 살펴보겠습니다.
React에서 ReactDOM.createPortal()을 사용하여 숫자 생성 앱 만들기
이 예에서는 onClick 이벤트 핸들러를 사용하여 자식 구성 요소가 div 내에 직접 있지 않은 반면 자식 구성 요소에서 부모 구성 요소의 상태를 제어할 수 있는 방법을 살펴봅니다.
새 프로젝트 폴더를 만들고 공용 폴더로 이동하여 index.html 파일에 액세스하고 자식 구성 요소가 렌더링될 DOM 역할을 하는 div를 만듭니다. 따라서 index.html은 다음과 같이 표시됩니다.
코드 스니펫 - indx.html:
<div id="app-container"></div>
<div id="modal-container"></div>
그런 다음 index.js 파일로 이동하여 실제 코딩을 수행합니다. 여기에서는 react-dom에서 createPortal() 함수를 가져옵니다.
코드 스니펫 - index.js:
import React from 'react';
import ReactDOM, { render, createPortal } from 'react-dom';
const appContainer = document.getElementById('app-container');
const modalContainer = document.getElementById('modal-container');
class Parent extends React.Component {
state = {clicks: 0};
onClick = () => {
this.setState(state => ({clicks: state.clicks + 1}));
};
render() {
return (
<div onClick={this.onClick}>
<p>Number of clicks: {this.state.clicks}</p>
{ReactDOM.createPortal(<Child />, modalContainer)}
</div>
);
}
}
function Child() {
return <button>Click</button>;
}
ReactDOM.render(<Parent />, appContainer);
출력:
을 사용한 숫자 생성 앱
클릭 버튼은 버튼을 클릭할 때 수행할 작업을 정의하는 구성 요소 내에 없지만 부모 구성 요소를 업데이트하는 버튼을 볼 수 있습니다.
React에서 ReactDOM.createPortal()을 사용하여 CSS 오버레이 효과 만들기
createPortal() 기능을 사용하면 스타일링이 버튼의 동작을 정의하는 기능 구성 요소 내에 있지 않은 경우에도 버튼을 클릭하면 웹 페이지를 덮을 .js 파일에 스타일링 구성 요소를 만들 수 있습니다. .
src 폴더 안에 새 파일을 만들고 overlayStyles.js라는 이름을 지정합니다. 여기에는 버튼을 클릭할 때 웹 페이지에 렌더링되는 오버레이 CSS 스타일이 포함됩니다.
그런 다음 index.js 파일로 이동하여 다음 코드를 입력합니다.
코드 스니펫 - index.js:
import React from "react";
import ReactDOM, { render } from "react-dom";
import { overlay, overlayContent } from "./overlayStyles";
class Overlay extends React.Component {
constructor(props) {
super(props);
this.overlayContainer = document.createElement("div");
document.body.appendChild(this.overlayContainer);
}
componentWillUnmount() {
document.body.removeChild(this.overlayContainer);
}
render() {
return ReactDOM.createPortal(
<div style={overlay}>
<div style={overlayContent}>{this.props.children}</div>
</div>,
this.overlayContainer
);
}
}
class App extends React.Component {
state = {
showOverlay: false
};
toggleOverlay = () => {
this.setState(prevState => {
return { showOverlay: !prevState.showOverlay };
});
};
render() {
return (
<div>
<h1>Dashboard</h1>
{this.state.showOverlay && (
<Overlay>
<div>
Overlay Content{" "}
<button onClick={this.toggleOverlay}>Close</button>
</div>
</Overlay>
)}
<button onClick={this.toggleOverlay}>Open Overlay</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
그런 다음 overlayStyles.js 파일에서 다음과 같은 CSS 코드를 추가합니다.
코드 스니펫 - overlayStyles.js:
export const overlay = {
height: "100%",
width: "100%",
position: "fixed",
StayInPlaceZIndex: "1",
SitOnTopLeft: "0",
top: "0",
backgroundColor: "rgb(0,0,0)",
BlackFallbackColorBackgroundColor: "rgba(0,0,0, 0.9)",
BlackWOpacityOverflowX: "hidden",
DisableHorizontalScrollTransition: "0.5s"
};
export const overlayContent = {
position: "relative",
top: "25%",
width: "100%",
textAlign: "center",
marginTop: "30px",
color: "white"
};
출력:
오버레이 열기 버튼을 클릭하면 onClick 이벤트를 처리하는 구성 요소 내에 있지 않은 경우에도 스타일이 활성화되는 것을 볼 수 있습니다.
결론
ReactDOM.createPortal() 기능을 사용하면 코더가 애플리케이션 내부의 특정 기능에 사용할 구성 요소를 쉽게 분리할 수 있습니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn