스타일 컴포넌트를 사용하면서 가장 신경이 쓰였던 부분은 바로 네이밍 이었다.
여러가지 방법으로 코드를 작성해 보았지만 보기에 깔끔해 보이지 않아서 계속해서 고민을 하게 되었다.
지금까지 사용해왔던 방법들에 대해서 간단히 설명하고 어떤식으로 조정할 수 있을지 적어 보려고 한다.
첫번째 방법으로는 컴포넌트에 특정 기능에 맞는 이름을 넣어 모든 태그에 네이밍을 해주는 방식이다. 이는 아래와 같다
// MainPage/index.jsx
const MainPage = () => {
return (
<MainPageLayout>
<Header>
<HeaderTitle>메인 페이지</HeaderTitle>
<HeaderNav>
<HeaderNavList>
// active속성을 props로 전달해서 css를 설정
<HeaderNavItem active>홈</HeaderNavItem>
<HeaderNavItem>메뉴1</HeaderNavItem>
<HeaderNavItem>메뉴2</HeaderNavItem>
</HeaderNavList>
</HeaderNav>
</Header>
<Content>
<SlideContent>
<ContentItem>1</ContentItem>
<ContentItem>2</ContentItem>
<ContentItem>3</ContentItem>
</SlideContent>
</Content>
<Footer>
하단 내용
</Footer>
</MainPageLayout>
)
}
// MainPage/styles.js
export const MainPageLayout = styled.div``;
export const Header = styled.header``;
export const HeaderTitle = styled.h1``;
export const HeaderNav = styled.nav``;
export const HeaderNavList = styled.ul``;
export const HeaderNavItem = styled.li`
// active 속성이 true면 파란색 아니면 하얀색
color: ${({active}) => active ? 'blue' : '#fff'}
`;
export const Content = styled.nav``;
export const Footer = styled.footer``;
// components/SlideContent/index.jsx
const SlideContent = (props) => {
const { children } = props;
return (
<SlideContentLayout>
{children}
</SlideContentLayout>
)
}
다음으로 사용해본 방식은 가장 상위의 태그만 스타일 컴포넌트로 만들어주고 안에 있는 태그들에는 className을 이용해서 네이밍 해주는 방식이다.
// MainPage/index.jsx
const MainPage = () => {
return (
<MainPageLayout>
<header className="header">
<h2 className="header__title">메인 페이지</h2>
<nav className="nav">
<ul claName="nav__list">
// 특정 조건일때는 className에 --active를 붙여주도록 코드를 작성해야함
<li className="nav__item nav__item--active">홈</li>
<li className="nav__item">메뉴1</li>
<li className="nav__item">메뉴2</li>
</ul>
</nav>
</header>
<div className="content">
<SlideContent className="content__list">
<li className="content__item">1</li>
<li className="content__item">2</li>
<li className="content__item">3</li>
</SlideContent>
</div>
<footer className="footer">
하단 내용
</footer>
</MainPageLayout>
)
}
// MainPage/styles.js
export const MainPageLayout = styled.div`
.header {
.header__title {}
.nav {
.nav__list {
.nav__item {
color: #fff;
.nav__item--active { color: blue }
}
}
}
.content {}
.footer {}
}
`;
위의 두 방식을 혼합한 방식으로 스타일만 가지고있는 태그들은 className을 이용해 네이밍하고, 상태를 가지고있는 태그들은 스타일 컴포넌트를 이용해 네이밍하는 방식이다.
// MainPage/index.jsx
const MainPage = () => {
return (
<MainPageLayout>
<header className="header">
<h2 className="header__title">메인 페이지</h2>
<nav className="nav">
<ul claName="nav__list">
// 상태값을 가지는 태그는 스타일 컴포넌트로 분리
<NavItem active>홈</NavItem>
<NavItem>메뉴1</NavItem>
<NavItem>메뉴2</NavItem>
</ul>
</nav>
</header>
<div className="content">
<SlideContent className="content__list">
<li className="content__item">1</li>
<li className="content__item">2</li>
<li className="content__item">3</li>
</SlideContent>
</div>
<footer className="footer">
하단 내용
</footer>
</MainPageLayout>
)
}
// MainPage/styles.js
export const NavItem = styled.li`
color: ${({active}) => active ? 'blue' : '#fff'};
`;
export const MainPageLayout = styled.div`
.header {
.header__title {}
.nav {
.nav__list {}
}
.content {}
.footer {}
}
`;
위와 같은 방식들을 사용해 네이밍을 하면서 다른 개발자분들은 어떤식으로 네이밍을 하는지 궁금해졌다. 그래서 구글링을 해본 결과 나와 같은 방식으로 네이밍을 하는 분들도 있고, 다른 방식으로 하시는 분들도 많았다.
그 중에서 기억에 남는 방식을 정리해보려고 한다.
스타일 컴포넌트를 분리할때 S라는 이름으로 요약하여 구분해주는 방식이다.
스타일 파일을 분리해서 스타일들을 내보낼때 객체에 담아서 내보내고, 사용할 index파일에서 모든 요소들을 S라는 이름으로 묶어서 불러와 사용한다.
// MainPage/index.jsx
import * as S from ./styles.js;
const MainPage = () => {
return (
<S.MainPageLayout>
<S.Header>
<S.HeaderTitle>메인 페이지</HeaderTitle>
<S.HeaderNav>
<S.HeaderNavList>
// active속성을 props로 전달해서 css를 설정
<S.HeaderNavItem active>홈</S.HeaderNavItem>
<S.HeaderNavItem>메뉴1</S.HeaderNavItem>
<S.HeaderNavItem>메뉴2</S.HeaderNavItem>
</S.HeaderNavList>
</S.HeaderNav>
</S.Header>
<S.Content>
<SlideContent>
<ContentItem>1</S.ContentItem>
<ContentItem>2</S.ContentItem>
<ContentItem>3</S.ContentItem>
</SlideContent>
</S.Content>
<S.Footer>
하단 내용
</S.Footer>
</S.MainPageLayout>
)
}
// MainPage/styles.js
export const MainPageLayout = styled.div``;
export const Header = styled.header``;
export const HeaderTitle = styled.h1``;
export const HeaderNav = styled.nav``;
export const HeaderNavList = styled.ul``;
export const HeaderNavItem = styled.li`
color: ${({active}) => active ? 'blue' : '#fff'}
`;
export const Content = styled.nav``;
export const Footer = styled.footer``;
// components/SlideContent/index.jsx
export const ContentItem = ({children}) => {
return (
<ContentItemLayout>
{children}
</ContentItemLayout>
)
}
const SlideContent = (props) => {
const { children } = props;
return (
<SlideContentLayout>
{children}
</SlideContentLayout>
)
}
위와 같은 방식으로 코드를 작성하면 스타일 컴포넌트와 공통 컴포넌트의 분리가 용이해진다. 또한, MainPage의 코드를 봤을때 html의 구조를 파악하기 어려워지는 문제점은 네이밍 컨벤션을 이용해 해결할 수 있을 것 같다.
스타일 컴포넌트 네이밍 규칙을 정해서 각 태그에 맞는 컴포넌트 명을 사용한다면 html의 구조를 파악하는데 용이할 것이다.
GitHub - Hi-Fi-Club/FE > Styled Components : Naming Convention
미디엄 - Orry Baram : Naming Styled Components
잘보고 갑니다