728x90 간단 기록5 [Next.js] 확장성 높은 Layout 컴포넌트 구축하기 _app.jsimport Layout from "../components/Layout"export default function App({ Component, pageProps }) { const getLayout = Component.getLayout || ((page) => { page }) return getLayout()}Component 는 페이지를 의미한다.따라서, 페이지가 getLayout 을 가지고 있다면 그것을 보여주고, 가지고 있지 않다면 다른 구조를 보여주도록 조건을 주면 된다. [ 페이지 ]csr.jsimport Layout from '../components/Layout'import SubLayout from '../components/SubLayout'export defa.. 2024. 7. 21. [React] 새 창에서 동일한 세팅 값 유지하도록 하기 (URL query string 활용) 목표 : 새 창을 열었을 때, 기존에 보던 화면과 동일한 세팅 값을 가진 화면을 띄워야 한다.기능 : 현재 발생한 알람을 보는 페이지에서 '새 창 열기' 버튼을 눌렀을 때, 기존에 사용자가 세팅해 놓았던 값들을 그대로 유지한 새 창이 열리도록 한다.방법 : 기존에 사용자가 세팅한 값을 URL query string으로 보내고, 그 값을 가져와 화면을 그린다. URL query string 을 가져올 때- Next.js 에서는 useRouter 를 사용해서 (비교적) 간단하게 가져올 수 있지만- React 에서는 URL 을 디코딩해서 JSON 문자열로 변환하는 과정이 필요했다. 기존에 사용자가 세팅할 수 있는 값들이 꽤 많아서 객체 형태로 보내야 했다.세팅할 수 있는 값은 아래와 같다.{ pageNu.. 2024. 6. 10. [React] useRef 하나로 여러 데이터 관리하기 (feat. ag-grid) 목표: 하나의 useRef 로 현재 Grid 데이터 저장하기 의도: 반복문으로 감싸진 Grid 컴포넌트에 useRef 를 각각 세팅하기가 어려워서, 하나의 useRef 를 통해 여러 Grid 데이터를 관리하고 저장할 수 있도록 하고 싶었다 기능: Grid 추가 버튼을 누르면 Grid 가 추가되고 - 사용자가 Grid 내용을 변경하면 - 변경한 값을 저장한다 방법: useRef 초기값을 null 이 아닌 [] (빈 배열) 로 세팅하여, 하나의 useRef 로 여러 Grid 데이터를 관리한다 부모 컴포넌트 const gridRef = useRef([]) export const Parent = () => { return ( 배열.map((item, idx) => ( )) ) } gridRef 에 빈 배열을 .. 2024. 1. 18. [Next.js] window.innerWidth 가져오는 커스텀 훅 만들기 Next.js는 SSR을 기본으로 하기 때문에 서버에서 렌더링하는 시점에 window를 가져다 쓸 수 없다 따라서 window.innerWidth도 바로 쓸 수 없게 되는데 커스텀 훅을 통해서 window에 접근할 수 있는 방법이 있다 import { useState, useEffect } from 'react' const useInnerWidth = () => { const [innerWidthVal, setInnerWidthVal] = useState(0) useEffect(() => { setInnerWidthVal(window.innerWidth) const handleResize = () => { setInnerWidthVal(window.innerWidth) } window.addEventLi.. 2023. 6. 18. 이전 1 2 다음 728x90