Next js 로컬스토리지 활용해 새로고침 시에도 데이터 유지

🎯 목표 현재 새로고침 시 사이드바의 useState가 초기화되고 있습니다. 로컬 스토리지를 활용해 액티브 (활성화 상태)가 새로고침 시에도 선택되었던 값으로 활성화되게 해보겠습니다.로컬 스토리지란 브라우저에 반영구적으로 유지되는 저장소입니다. 웹사이트를 꺼도 만료되지 않는 특성이 있어 새로고침시에도 유지되어야 하는 값을 저장하는 데 활용됩니다.유사한 기능을 수행하는 Redux 라이브러리도 있었지만, state변경에 따른 재렌더링 기능을 기대하지 않아 배재했습니다. (사실 사용해 본적없음) 그럼 기본 메서드 부터 살펴보겠습니다.📃진행 순서로컬 스토리지의 기본 API새로고침 시 저장된 데이터로 액티브 활성화시키기컴포넌트 렌더링 시 저장된 값 가져와서 활성화 시키기키 값 조건 여부에 따라 데이터 가져오..

• format_list_bulleted react
• · 2025. 5. 22.
• textsms

Next js Layout 분리 + 로드 시 동적으로 container height 조정

이번 시간에는 Header, Sidebar,Footer 들을 따로 분리하여 가져온 뒤 Footer가 아래 위치 할 수 있도록 수정해보겠습니다.자 우선 Component들을 layouts 폴더에 모두 분리해주었고, Wrapper는 layout으로 내부 내용없이 스타일로써 감싸주기만 하기 때문에 layout.js 자체에서 분리해주었어요~// Componentimport Header from './layouts/Header'import Sidebar from './layouts/Sidebar'import Footer from './layouts/Footer' const Wrapper = styled.div` display: flex; min-height: ${({ minH }) => minH}..

• format_list_bulleted react
• · 2025. 4. 21.
• textsms