지난 시간에 이어 새로운 프로젝트를 계속 진행해 볼게요. 이번 시간에는 기본적인 레이아웃과 테마를 적용하는 방법을 알아볼게요.
페이지 레이아웃과 children props
레이아웃은 페이지의 한정된 공간에 구성 요소들을 효과적으로 배열하는 것을 의미해요. 리액트에서는 화면에 적절한 컴포넌트를 배치하기 위한 기본적인 틀이라고 생각하면 돼요.
컴포넌트 내부의 요소들을 전달받기 위해 props 의 children 속성을 사용할 수 있어요. 공통된 UI를 하나의 레이아웃 컴포넌트로 만들고, 내부 콘텐츠를 children 으로 전달하면 중복된 코드를 효과적으로 줄일 수 있어요.
import React from "react";
interface LayoutProps {
children: React.ReactNode;
}
const Layout: React.FC<LayoutProps> = ({ children }) => {
return (
<div>
<header>헤더 영역</header>
<main>{children}</main>
<footer>푸터 영역</footer>
</div>
);
};
export default Layout;전역 스타일 (Global Style)
프로젝트 전체에 일관된 스타일을 적용하고, 브라우저마다 기본적으로 설정된 스타일(User Agent Stylesheet)의 차이를 극복하기 위해 전역 스타일을 설정해요. 주로 다음과 같은 방식들을 사용해요.
- 에릭 마이어의 Reset CSS: 모든 기본 스타일을 완전히 초기화해요.
h1이나h2같이 크기 차이가 있는 태그들의 기본 여백과 폰트 크기조차 모두 동일하게 0으로 맞춰버려요. - Normalize.css: Reset CSS와 달리 태그들의 고유한 특징은 살려두면서 브라우저 간의 렌더링 차이만 일관성 있게 맞춰줘요.
- Sanitize.css: Normalize.css와 비슷하지만 조금 더 현대적으로 발전된 형태의 초기화 라이브러리예요.
CSS-in-JS와 Styled Components
CSS-in-JS는 말 그대로 자바스크립트 코드 내에서 CSS를 작성하는 방식이에요. 이 방식을 사용하면 스타일의 전역 충돌을 막고 컴포넌트 단위로 스타일을 캡슐화할 수 있어요. 또한 자바스크립트의 상태 값을 스타일과 쉽게 공유할 수 있다는 장점이 있어요.
대표적인 라이브러리로 styled-components 가 있어요. 리액트 컴포넌트에 스타일을 직관적으로 적용할 수 있도록 도와줘요. VSCode를 사용한다면 확장 프로그램으로 자동 완성을 지원받아 더 편리하게 작성할 수 있어요.
import styled from "styled-components";
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
`;
function App() {
return <Button>클릭하세요</Button>;
}테마(Theme)와 Context API
styled-components 에서 제공하는 ThemeProvider 를 활용하면 프로젝트 전체에 공통 테마를 지정할 수 있어요. 테마를 설정하면 UI와 UX의 일관성을 유지하기 좋고, 유지보수와 확장성이 뛰어나며 다크 모드 같은 사용자 맞춤 색상을 구현하기 쉬워져요.
이러한 전역 테마 상태를 관리할 때 리액트 내장 기능인 Context API를 활용할 수 있어요. Context API를 사용하면 props 를 컴포넌트마다 일일이 넘겨주지 않아도, 컴포넌트 트리 전체에서 전역으로 데이터를 공유하고 관리할 수 있어요.
