TIL: Layout, Portals, Type Assertion) - 220612

Lumpen·2022년 6월 12일

React TIL typescript

TIL

목록 보기

46/244

앞으로의 과제

게시판 만들기
helmet

Keyword

textarea

resize: none; 설정으로 사이즈 조절을 막을 수 있다

toLocaleString()

toLocaleString(): 숫자를 로컬의 language format에 맞는 문자열로 변경
파라미터로 아무것도 전달되지 않으면 사용자 로컬 환경의 locale을 default로 사용
-> 드디어 써봤는데 편하고, 간결하고, 이해하기 쉽다

Layout

Layout 컴포넌트: react-router 6V를 적용하기 위해 변경

import styles from './routes.module.scss'
import Dashboard from './Dashboard'
import Layout from './_shared/Layout'

import { Routes, Route } from 'react-router-dom'

const App = () => {
  return (
    <div className={styles.app}>
      <Routes>
        <Route element={<Layout />}> // layout 적용
          <Route path='/' element={<Dashboard />} />
        </Route>
      </Routes>
    </div>
  )
}

export default App

// Layout.tsx
import Header from './Header'
import LNB from './LNB'
import SideMenu from './SideMenu'

import styles from './layout.module.scss'

import { Outlet } from 'react-router-dom'

const Layout = () => {
  return (
    <div className={styles.dashboardContainer}>
      <Header />
      <main className={styles.main}>
        <LNB />
        <Outlet />
        <SideMenu />
      </main>
    </div>
  )
}

export default Layout

Portal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공
-> 실제 dom 위치는 바깥에 있지만 React 컴포넌트 tree 내부에 위치

portal의 전형적인 유스케이스는 부모 컴포넌트에 overflow: hidden이나 z-index가 있는 경우이지만,
시각적으로 자식을 “튀어나오도록” 보여야 하는 경우. -> 다이얼로그, 호버카드나 툴팁과 같은 것
portal 사용 시 키보드 포커스 관리를 주의

// public/index.html에서 portal을 열 div 생성
  <div id="root"></div>
  <div id="modal"></div>

// Modal/index.ts
import ModalPortal from './Portal'

const Modal = () => {
  return (
    <ModalPortal>
      <div>hi</div>
    </ModalPortal>
  )
}

export default Modal

// Portal.ts
import { createPortal } from 'react-dom'
import React from 'react'

interface IPortal {
  children?: React.ReactNode
}

  // props - children으로 컴포넌트를 받아 포탈 생성
const ModalPortal = ({ children }: IPortal) => {
  const el = document.getElementById('modal')
  return createPortal(children, el!) // non-null assertions
  // 첫 번째 인자(child)는 엘리먼트, 문자열, 
 //혹은 fragment와 같은 어떤 종류든 렌더링할 수 있는 React 자식, 
// 두 번째 인자(container)는 DOM 엘리먼트
}

export default ModalPortal

// portal을 사용할 컴포넌트에서 portal, modal을 불러와 렌더링
import Modal from './Modal'

const Board = () => {
  return (
    <div>{isModal && <Modal isModal={isModal} />}</div>
    )
}