Next js 커스텀 훅, LNB Depth2 Active 지정

{depth2Active.toggleActive(index)}}>🎯 커스텀 훅으로 Active 함수 재사용하기아코디언 구현에서 링크별 활성화 상태 관리를 위해 다음과 같이 함수를 만들어 클래스를 동적 바인딩 하는 형식으로 Depth1 토글 형식을 완성했었습니다. const [isActive, setisActive] = useState(null); const toggleActive = (index) => { console.log(index) setisActive(prev => (prev === index) ? null : index) }이제 이 로직을 커스텀 훅을 이용해 재사용성을 높여 Depth2로 확장시켜보겠습니다.🪜진행 순서커스텀훅이란?커스텀 훅을 왜 사용하는지..

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

Next js Props 구조 분해 할당, MUI 탭 만들기

🎯 목표 오늘은 탭 기능을 구현해보겠습니다. 탭은 하나의 인터페이스에서 다양한 문서를 전환하게 해줍니다. 현재 만들고 있는 Admin System의 특성과 가장 부합한다 생각이 들어 첫번째로 제작했습니다.MUI 탭 중 접근성을 가장 준수한 템플릿을 참고했습니다.https://mui.com/material-ui/react-tabs/🪜진행 순서컴포넌트 생성 및 importTabPanel 설계구조분해할당 탭 버튼 접근성 함수 제작버튼 스타일 초기화컴포넌트 생성 및 import파일은 아래와 같이 생성했습니다. styles만 따로 분리했습니다.components > tab > tab.jscomponents > tab > styles.js 서드파티, 스타일 import // Tab.js"use client"im..

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

Next js LNB 리팩토링

🎯 리팩토링 목표 이번 포스팅에서는 기존에 만들었던 LNB를 리팩토링하는 시간을 가져보겠습니다. 기존 코드의 가장 큰 문제점은 컴포넌트 분리 미흡입니다.현재 스타일 선언 (Emotion), 렌더링 JSX (데이터 출력)이 한 파일에 혼용되어 있어 파일이 복잡하여유지보수에 어려움이 생길 수 있습니다. 그래서 리액트의 단일 책임 원칙에 의거해 컴포넌트 설계를 변경해보겠습니다.단일 책임 원칙이란?한 컴포넌트가 하나의 역할을 명확히 하도록 설계하는 원칙으로써 전체 애플리케이션이 유지보수성이 높고 유연히 변경될 수 있도록 하게 해야한다는 개념입니다.핵심 요약1. 데이터와 UI의 분리2. 명확한 역할 수행 컴포넌트 설계3. 단일화된 컴포넌트들간의 합성 이용4. 재사용 가능한 로직 => 훅으로 분리5. 계층적으로 ..

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

Next js 공통 유틸 함수 분리 (한글 변환)

이번 게시물부터 서식을 통일하고 글을 더 구조화해서 작성해보려고 합니다.다른 사람들의 Velog 및 Tistory를 읽어보며 템플릿화된 듯한 서식이 있고 그걸 활용해 글이 정리되고 실제 활용성이 높은 문서화가 되고 있다고 느꼈기 때문입니다.공통 유틸 함수란? 공통 유틸 함수는 다양한 컴포넌트 및 모듈에서 재사용이 가능한 함수를 말합니다. 실무에 적용되는 함수의 예시 기능을 들자면 숫자 세 자리마다 콤마 찍기, 이메일 유효성 체크, 빈 값 체크 등이 여기에 포함됩니다.🎯 프로젝트 적용 목적앞서 제작한 공통 타이틀 컴포넌트에서 전달받은 Path값을 한글로 변환해 Return해주는 함수를 만들었었습니다.현재 브레드크럼브가 영어로 출력되기 때문에 해당 로직이 동일하게 필요했습니다. 그래서 두 컴포넌트 동일하게..

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

Next js 페이지 공통 타이틀 출력

✅ Props별 스타일 적용이번 시간에는 페이지 대표 타이틀을 컴포넌트로 생성해 동적으로 출력해보겠습니다.Title은 props 전달 값에 따라 다른 CSS를 적용할 수 있도록 만들었습니다.아래와 같이 스타일 컴포넌트 요소로 스타일을 먼저 선언해주었습니다.// Title.jsconst TitleWrap = styled.div` margin-bottom: 8px;`const MainTitle = ` font-size: 32px; font-weight: 700;`;const SubTitle = ` font-size: 24px; font-weight: 500;`; 컴포넌트는 기본적으로 Wrapper와 함께 출력되며, className값으로 선언되었던 CSS를 매개변수로써 받습니다. ..

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

Next js 글로벌 스타일 변수 추가하기

Emotion 라이브러리를 CSS-IN-JS로 스타일을 컴포넌트 단위로 활용할 수 있게 하는 훌륭한 라이브러리입니다.하지만 Emotion에 한 가지 불편한 점을 느꼈습니다.일반 css의 root는 공통 색상, 공통 타이포 등 전역적으로 사용되는 변수를 사용할 수 있어서 프로젝트의 규모가 확대될수록 일괄된 스타일링과 유지보수에 큰 이점을 가져옵니다.Emotion은 아쉽게도 스타일 컴포넌트화를 지양하기 때문에 해당 기능을 지원하지않습니다.그래서 대체 방안으로 global_variables (전역 변수)를 관리할 수 있는 파일을 만들어 스타일 컴포넌트와 결합하는 방식으로 진행해보았습니다.파일을 생성하고 아래와 같이 root란 이름으로 변수를 선언한 뒤 전역 color 객체를 생성했습니다. // global-v..

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