🧱 레이아웃 구성과 글로벌 스타일, 그리고 Styled-Components

React 로 프로젝트를 구성할 때, 컴포넌트 하나하나 만드는 것도 중요하지만
더 중요한 건 화면의 뼈대, 즉 레이아웃과 전역 스타일을 잘 설계하는 것이다.

오늘은 레이아웃의 필요성과 함께, 글로벌 스타일,
그리고 Styled-Components를 활용한 스타일 관리까지 정리했다.

---

📐 레이아웃은 왜 필요할까?

레이아웃은 단순히 UI를 보기 좋게 나누기 위한 것만이 아니다.
그 이상으로 중요한 역할들을 맡는다.

1. 프로젝트의 기본적인 화면 구조를 잡아준다
2. 모든 화면에서 반복적으로 사용되는 Header, Footer, Sidebar 등을 고정해서 보여준다
3. 상황에 따라 다른 레이아웃을 보여줄 수 있는 기반을 만든다 (ex. 로그인 페이지 vs 대시보드)

// Layout.tsx
const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
};

---

👶 children 컴포넌트의 타입

children에는 다양한 타입의 React 요소가 들어갈 수 있어서 정확한 타입을 아는 게 중요하다.

• JSX.Element: 하나의 JSX만 올 수 있음
• ReactElement: JSX.Element의 더 일반적인 형태
• ReactNode: 문자열, 숫자, boolean, null, undefined, ReactElement 등 대부분의 React에서 렌더 가능한 요소 포함 → 대부분 이걸 씀

interface LayoutProps {
  children: React.ReactNode;
}

---

🌍 Global Style

React 프로젝트에서는 전역 스타일(Global Style)을 따로 관리하는 게 좋다.
이유는 다음과 같다:

1. 프로젝트 전반에 걸쳐 일관된 스타일 적용이 가능
2. 브라우저 기본 스타일(User Agent Stylesheet)의 차이를 초기화
3. 헤더/푸터/버튼 등의 스타일을 모든 페이지에서 동일하게 유지

---

전역 스타일 초기화 방법

전통적으로는 CSS 초기화 방식이 아래 세 가지가 대표적이다:

• reset.css (에릭 마이어)
• normalize.css
• sanitize.css

---

💡 css-in-js는 왜 필요할까?

전통적인 CSS 방식은 프로젝트가 커질수록 다음과 같은 문제가 생긴다:

• 전역 네이밍 충돌
• 불필요한 오버라이딩
• 컴포넌트와 스타일이 분리되어 추적하기 어려움
• 특정 컴포넌트에만 쓰이는 스타일도 전역에 로딩됨
• 명시도/우선순위 문제 (Specificity)

그래서 나온 방식이 CSS-in-JS다. 그중 대표적인 것이 styled-components.

---

🎨 styled-components로 스타일 관리하기

npm install styled-components
npm install --save-dev @types/styled-components

import styled, { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Pretendard', sans-serif;
    background-color: #121212;
    color: white;
  }
`;

전역 스타일을 한 번만 설정하면, 어떤 페이지든 일관된 스타일을 유지할 수 있다.

그리고 컴포넌트 단위로 스타일을 분리해 캡슐화할 수 있다:

const StyledButton = styled.button`
  background-color: #5c6bc0;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
`;

---

🔨 TIL

• 레이아웃은 반복 요소를 관리하고, 앱 구조를 잡는 데 필수다.
• children의 타입은 ReactNode를 주로 쓴다.
• 전역 스타일은 스타일 일관성 유지와 브라우저 기본 스타일 초기화에 필요하다.
• CSS-in-JS 방식 중 styled-components는 스타일을 컴포넌트 단위로 관리할 수 있어 유지보수에 유리하다.