Next js 아코디언 액티브 유지

🎯 페이지 이동 시에도 액티브 유지아코디언 링크로 새 페이지로 이동 시에 모든 is-active 클래스가 사라지는데요. 사용자 경험 향상을 위해 이동시에도 어떤 메뉴가 활성화되었는지 유지되게 해보겠습니다.리액트의 useSearchParams 내장 훅을 이용해 구현하겠습니다.useSearchParams?리액트 라우터에서 현재 URL의 쿼리 매개변수(쿼리 스트링)를 읽고 수정하는 데 사용되는 훅🪜진행 순서페이지 이동 시 URL에 현재 active 값 담아서 이동 시키기컴포넌트 생성 시 URL에서 값 가져오기액티브 초기값으로 설정하기액티브 초기값 업데이트페이지 이동 시 URL에 현재 active 값 담아서 이동현재 idx는 1depth, index는 2depth의 고유값입니다. 이를 쿼리 스트링으로 이동할..

• format_list_bulleted react
• · 2025. 4. 29.
• 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