[react] createPortal, Suspense

📍 React Portal

• 컴포넌트를 DOM Tree의 다른 위치에 렌더링할 수 있게 하는 기능.
• 모달, 레이어 팝업에서 많이 사용함.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { createPortal } from 'react-dom';


function Modal( {children} ) {
    const style = {
        position: 'fixed',
        top : 0,
        left : 0,
        right : 0,
        bottom : 0,
        backgroundColor : 'rgba(0,0,0,0.5)',
        display : 'flex',
        alignItems : 'center', 
        justifyContent : 'center'
    }

    const style2 = {
        backgroundColor: 'white',
        padding : '20px',
        borderRadius : '20px'
    }

    return createPortal(
        <div style={style}>
            <div style={style2}>{children}</div>
        </div>,
        document.body
    );
}

function App() {
    const [open, setOpen] = useState(false);

    return (
        <div>
            <h1>React Portal Example</h1>
            <button onClick={ () => setOpen(true) }> open modal </button>
            
            { open && (
                    <Modal>
                        <h2>안녕하세요</h2>
                        <button onClick={ () => setOpen(false) } >닫기</button>
                    </Modal>
                )

            }
        </div>
    );
}

createRoot(document.getElementById('mainModal')).render(
    <App />
);

 

 

 

 

📍 React Suspense

• 코드나 데이터가 로드될 때까지 대체 HTML을 표시하는 기능
• 아직 로딩이 안되면,,, 로딩 되기 전까지의 LOADING... 같은 걸 표시해주기 위함.
• React.lazy는 반드시 import()와 함께 써야 한다.

import { createRoot } from 'react-dom/client';
import React, { Suspense } from 'react';


// const LazyGreeting = React.lazy( () => import('./Greeting') );
const LazyGreeting = React.lazy( () => 
    new Promise((resolve) => {
        setTimeout( () => resolve(import('./Greeting')), 2000 );
    })
);


function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyGreeting />
            </Suspense>
        </div>
    );
}

createRoot(document.getElementById('suspense')).render(
    <App />
);

 

## Greating.jsx

function Greeting() {
    return <h1>안녕하세요??</h1>
}

export default Greeting;

---

출처 : 

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.