[11주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 52

 React 프로젝트 구조 설계 + 테마 관리(Context API) 구현

 개요

이번 프로젝트에서는 단순 기능 구현을 넘어서

확장성과 유지보수를 고려한 프론트 구조 설계를 먼저 진행했다.

특히 아래 4가지에 집중했다.

• 레이아웃 구조 설계
• 글로벌 스타일 및 스타일 컴포넌트 적용
• 테마 시스템 구축 (Light / Dark)
• Context API를 활용한 전역 상태 관리

---

 1. 레이아웃 구성

프로젝트 초기에 레이아웃을 먼저 잡아두면

이후 페이지 개발 속도가 훨씬 빨라진다.

// Layout.tsx
constLayout= ({ children }) => {
return (
<>
<Header/>
<Main>{children}</Main>
<Footer/>
</>
  );
};

 핵심 포인트

• 공통 UI(Header, Footer)를 한 번만 정의
• 페이지마다 중복 코드 제거
• 유지보수 용이

---

 2. 글로벌 스타일 & 스타일 컴포넌트

스타일 관리는 styled-components를 사용했다.

// GlobalStyle.ts
import {createGlobalStyle }from'styled-components';

exportconstGlobalStyle=createGlobalStyle`
  body {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    background-color:${({ theme }) =>theme.bgColor};
  }
`;

적용 이유

• CSS 전역 충돌 방지
• 테마와 자연스럽게 연동 가능
• 컴포넌트 단위 스타일링

---

3. 테마 시스템 만들기

라이트 / 다크 모드를 지원하기 위해

테마 객체를 분리했다.

// theme.ts
exportconstlightTheme= {
  bgColor:'#ffffff',
  textColor:'#000000',
};

exportconstdarkTheme= {
  bgColor:'#000000',
  textColor:'#ffffff',
};

---

 4. Context API로 테마 상태 관리

전역 상태 관리를 위해 Context API를 사용했다.

// ThemeContext.tsx
import {createContext,useState }from'react';

exportconstThemeContext=createContext(null);

exportconstThemeProvider= ({ children }) => {
const [isDark,setIsDark]=useState(false);

consttoggleTheme= () =>setIsDark(prev =>!prev);

return (
<ThemeContext.Providervalue={{ isDark, toggleTheme }}>
      {children}
</ThemeContext.Provider>
  );
};

---

 5. 테마 적용

import {ThemeProviderasStyledProvider }from'styled-components';
import {lightTheme,darkTheme }from'./theme';

<StyledProvidertheme={isDark?darkTheme:lightTheme}>
<GlobalStyle/>
<App/>
</StyledProvider>

---

 결과

• 전체 UI가 테마에 따라 자동 변경
• 전역 상태로 어디서든 테마 변경 가능
• 유지보수성과 확장성 확보

---

 느낀 점

처음에는 단순히 기능만 구현하려 했지만,

구조를 먼저 잡고 시작하니 확실히 개발이 편해졌다.

특히 Context API를 활용한 테마 관리는

작은 기능이지만 사용자 경험을 크게 향상시킨다고 느꼈다.