🎯 레이아웃 구성을 잡고 sanitize.css와 styled-components를 사용해서 테마를 적용시킵니다.

📗 Today I Learned

레이아웃 구성

레이아웃은 콘텐츠를 화면이나 페이지에 배치하는 구조나 방식을 말합니다.

Home Page Layout

🏠 Home Page
├── <Header/>         ← 상단 헤더 영역 (공통 컴포넌트)
├── <Home/>           ← 메인 콘텐츠 영역 (홈 화면 전용)
└── <Footer/>         ← 하단 푸터 영역 (공통 컴포넌트)

Detail Page Layout

📄 Detail Page
├── <Header/>          ← 상단 헤더 영역 (공통 컴포넌트)
├── 콘텐츠 영역
│   ├── <Sidebar/>     ← 왼쪽 사이드바 (추가 메뉴 등)
│   └── 상세 컴포넌트    ← 오른쪽 상세 콘텐츠 (페이지 내용)
└── <Footer/>          ← 하단 푸터 영역 (공통 컴포넌트)

🤔 왜 레이아웃을 구성해야 할까?

• 화면 구조를 설계할 수 있습니다.
• Header, Footer 같은 공통 요소를 한 번에 관리할 수 있습니다.
• 다양한 상황에 맞게 유연하게 화면을 바꿀 수 있습니다.
  출처: MDN

코드 예시

import Footer from '../common/Footer';
import Header from '../common/Header';

interface LayoutProps {
  children: React.ReactNode; // 자식 요소를 받아올 수 있도록 타입 설정
}

export default function Layout({ children }: LayoutProps) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

• React.ReactNode : React에서 렌더링 가능한 모든 타입을 일컫습니다. (ex. 문자열, 숫자, JSX, 컴포넌트, 배열 등)
  
  • React.ReactNode > ReactElement > JSX.Element

사용 방법 1️⃣ - 요소로 넣기

export default function App() {
  return (
    <Layout children={<Home />} />
  );
}

사용 방법 2️⃣ - 컴포넌트 사이에 넣기

export default function App() {
  return (
    <Layout>
      <Home /> // children
    </Layout>
  );
}

레이아웃 컴포넌트는 어떤 페이지든 <Layout> 안에 넣기만 하면 Header와 Footer는 자동으로 포함됩니다.

---

Global Style

Global Style이란 프로젝트 전체에 적용되는 전역 스타일을 말합니다.

🤔 왜 Global Style을 작성할까?

user agent stylesheet로 표시되는 브라우저마다 다른 기본 스타일 차이를 없애기 위해 사용합니다.

CSS 초기화 도구

• Reset CSS
  모든 요소의 기본 스타일을 없애고 완전히 초기화 합니다.

• normalize.css
  브라우저 간 스타일 차이를 없애고, 의미 있는 기본 스타일은 유지하며 초기화 합니다.

• ✨ sanitize.css
  사용자의 접근성을 해치지 않으면서도 기본 브라우저 스타일 차이를 정리해주기 때문에, 많이 사용되고 있습니다.

styled-components 💅

styled-components는 CSS-in-JS 방식의 라이브러리로 JavaScript 파일 안에서 스타일을 정의하고, 이를 React 컴포넌트처럼 사용할 수 있게 해주는 도구입니다.

<npm install styled-components

🤔 왜 CSS-in-JS 방식으로 작성할까?

기존 CSS 파일 작성에는 몇 가지 단점👎이 있습니다.

• 전역 스타일 충돌
• 컴포넌트 간의 스타일 재사용의 어려움
• 클래스명 중복, 오버라이딩 복잡함
• CSS 순서 문제로 우선순위 꼬임 발생

---

💡 이러한 문제점을 해결 하기 위해 CSS-in-JS 방식이 등장했습니다. 대표적으로 styled-components 같은 라이브러리를 사용하면 다음과 같은 장점👍이 생겨납니다.

• 스타일을 컴포넌트화하여 코드 구조가 명확해짐
• 재사용성 높고 유지보수 용이
• 동적 스타일링이 쉬움

Global Style의 적용 방법

sanitize.css와 styled-components를 사용해서 스타일을 적용하였습니다.

// style/global.ts
import 'sanitize.css';
import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
  }

  h1 {
    margin: 0;
  }
`;

// App.tsx
import { GlobalStyle } from './styles/GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      <Layout>
        <Home />
      </Layout>
    </>
  );
}

GlobalStyle은 보통 App.tsx 최상단에서 한 번만 적용합니다.

---

테마(Theme)

테마란 웹사이트에 사용되는 색상, 폰트, 간격 등의 시각적 요소들을 한 곳에서 관리하는 방식입니다.

🤔 왜 테마를 사용할까?

• UX/UI 일관성 유지
• 유지보수와 기능 확장에 유리
• 재사용성과 가독성 증가
• 사용자 맞춤 설정 가능

코드 예시

type ThemeName = 'light' | 'dark';
type ColorKey = 'primary' | 'background' | 'secondary' | 'third';

interface Theme {
  name: ThemeName;
  color: Record<ColorKey, string>;
}

export const light: Theme = {
  name: 'light',
  color: {
    primary: 'brown',
    background: 'lightgrey',
    secondary: 'blue',
    third: 'green',
  },
};

export const dark: Theme = {
  name: 'dark',
  color: {
    primary: 'coral',
    background: 'midnightblue',
    secondary: 'darkblue',
    third: 'darkgreen',
  },
};

• Record<ColorKey, string>로 인해 color는 다음과 같은 구조를 갖습니다.

color: {
  primary: string;
  background: string;
  secondary: string;
  third: string;
}

⚠️ color 객체는 반드시 4개의 키를 모두 가지고 있어야 합니다.

강제하는 이유는 컴포넌트를 만들 때 테마 색상을 사용하는 부분에서도 예외 없이 일관된 스타일을 줄 수 있기 때문입니다.

const SomeComponent = styled.div`
  color: ${({ theme }) => theme.color.primary};
  background: ${({ theme }) => theme.color.background};
`;

---

Context API

Context API는 React의 전역 상태 관리 도구로 컴포넌트를 여러 단계 내려가지 않고도 데이터를 공유할 수 있게 해줍니다.

테마 스위처 🌓

Context API를 활용해 테마 스위처를 만듭니다.

• 사용자는 토글 UI를 통해 라이트/다크 테마를 전환할 수 있도록 설정합니다.

• 테마 상태는 Context로 관리하여 전체 컴포넌트에서 접근 가능하도록 합니다.

• 사용자가 설정한 테마는 로컬 스토리지에 저장하여 새로고침해도 유지되게 합니다.

📄 ThemeContext.tsx

import { createContext, ReactNode, useEffect, useState } from 'react';
import { getTheme, ThemeName } from '../style/theme';
import { ThemeProvider } from 'styled-components';
import { GlobalStyle } from '../style/global';

const DEFAULT_THEME_NAME = 'light';
const THEME_LOCALSTORAGE_KEY = 'book_store_theme';

interface State {
  themeName: ThemeName;
  toggleTheme: () => void;
}

export const state = {
  themeName: DEFAULT_THEME_NAME as ThemeName,
  toggleTheme: () => {},
};

export const ThemeContext = createContext<State>(state);

export const BookStoreThemeProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const [themeName, setThemeName] = useState<ThemeName>(DEFAULT_THEME_NAME);

  const toggleTheme = () => {
    setThemeName(themeName === 'light' ? 'dark' : 'light');
    localStorage.setItem(
      THEME_LOCALSTORAGE_KEY,
      themeName === 'light' ? 'dark' : 'light'
    );
  };

  useEffect(() => {
    const savedThemeName = localStorage.getItem(
      THEME_LOCALSTORAGE_KEY
    ) as ThemeName;

    setThemeName(savedThemeName || DEFAULT_THEME_NAME);
  }, []);

  return (
    <ThemeContext.Provider value={{ themeName, toggleTheme }}>
      <ThemeProvider theme={getTheme(themeName)}>
        <GlobalStyle themeName={themeName} />
        {children}
      </ThemeProvider>
    </ThemeContext.Provider>
  );
};

• BookStoreThemeProvider는 이 테마 상태를 전역으로 공급하는 컴포넌트입니다.

  • 현재 테마 상태는 useState로 관리합니다.

  • 버튼 클릭 시에 toggleTheme을 호출해 테마를 반전시키고, 테마는 localStorage에 저장하여 새로고침해도 유지되게 합니다.

  • useEffect는 처음에 렌더링될 때([]), 로컬 스토리지에서 테마 값을 불러옵니다. 값이 없으면, 기본값으로 light를 사용합니다.

  • Context와 styled-components의 ThemeProvider를 함께 감싸주어 return해줍니다.

    • ThemeContext.Provider : React 내부에서 테마 이름(themeName)과 테마 변경 함수(toggleTheme)를 컴포넌트 어디서든 사용할 수 있게 해줍니다.

    • ThemeProvider : 스타일에 사용되는 테마 색상들을 적용시켜줍니다.

📄 ThemeSwitcher.tsx

import { useContext } from 'react';
import { ThemeContext } from '../../context/ThemeContext';

export default function ThemeSwitcher() {
  const { themeName, toggleTheme } = useContext(ThemeContext);

  return <button onClick={toggleTheme}>{themeName}</button>;
}

• useContext로 themeName과 toggleTheme를 받아서 버튼을 렌더링합니다.

📄 App.tsx

import Layout from './components/layout/Layout';
import Home from './pages/Home';
import ThemeSwitcher from './components/header/ThemeSwitcher';
import { BookStoreThemeProvider } from './context/ThemeContext';

function App() {
  return (
    <BookStoreThemeProvider>
      <ThemeSwitcher />
      <Layout>
        <Home />
      </Layout>
    </BookStoreThemeProvider>
  );
}

export default App;

• BookStoreThemeProvider 컴포넌트는 앱 취상위에서 사용되며 전체 테마 상태를 관리합니다.

---

✏️ 회고

브라우저 스타일을 초기화하고, styled-components와 테마 시스템 🌞 / 🌙을 이용해서 만들어보는 게 쉽지 않았지만, 테마 상태를 전역에서 관리하는 연습을 더 많이 해야할 것 같다.