앞서 폴더 구조를 잡았으니 이번엔 사이트 구조를 잡아보겠다.
정말 단순한 구조이다.
이미지에선 header와 nav가 분리되어 있지만 사실상 붙어있다고 해도 무방.
아무튼~ 이 구조를 만들기 위해 이전에 만든 폴더 구조를 활용하여 작업할 것이다.
(작업 전 추가된 내용이 있는데 Emotion이라는 라이브러리를 사용하게 되었다. 이전 글에 업데이트하겠숨)
📂 layout
📂 Footer.js
📂 Header.js
📂 styles.js
각 파일 설명을 하자면,
- Footer.js: 레이아웃 푸터 담당
- Header.js: 레이아웃 헤더 담당(nav 포함)
- styles.js: 레이아웃 스타일(css) 담당
갑자기 여기서 골🦴 아파지는 문제 발생.
요소를 쪼개서 레이아웃을 구성하고 스타일을 짜야하는데 어떻게 해야하묘?
예시) 다음과 같은 구조를 짜고 싶을 때 🤔
<nav>
<ul>
<li>
<a href="#">1Depth A</a>
</li>
<li>
<a href="#">1Depth B</a>
</li>
<li>
<a href="#">1Depth C</a>
</li>
</ul>
</nav>방법1. styles.js 사용
스타일 컴포넌트로 내비게이션을 만들고 Link 컴포넌트에 is-active라는 클래스로 개별 스타일을 적용시킨다.
👍장점
- 스타일의 범위가 컴포넌트 단위로 캡슐화되어 CSS 전역 오염 방지에 효과적(NavWrap 내에서만 작동)
- className으로 제어하여 직관적이고 유지보수가 용이
👎단점
- NavWrap 내에 정의되어 있어 재사용이 어려움(확장성 저하)
- className은 문자열이라 오타에 취약하며 TypeScript 미지원
방법2. 상수를 사용하여 제어
👍장점
- 스타일과 구조 재사용성 향상
- 의미적 네이밍으로 역할 명확화
👎단점
- 과도한 구조 분해로 불필요하게 복잡
- 컴포넌트 사용 시 상위 컴포넌트에서 스타일 상속 및 덮어쓰기 어려움
각자의 특징이 있다만 나는 방법2를 선택하려고 한다.
그 이유는
- 디자인 시스템을 염두하고 마크업을 해야하기 때문에
- UI를 컴포넌트 단위로 쪼개어 설계하여 유지보수에 편리함을 주기 위해
- Nextjs를 쓰는 프로젝트의 규모에 적합
음.. 이렇게 볼 수 있겠다.
그럼 이제 위 방법으로 레이아웃을 짜보겠숩니다만 그건 다음 글에서 만나요~