지난 두 과제의 리팩토링에서는 렌더링 최적화와 에러 해결에 집중했다면 이번 과제 리팩토링에서는 디자인에 신경을 써봤다.
지금까지는 styled-components 라이브러리를 사용했다.
아무래도 컴포넌트 기반으로 스타일링을 적용할 수 있다 보니 편리하기도 했고 익숙해서 항상 하던 방식대로 사용했었는데
뭔가.. styled-components도 내가 사용하는 방식보다 더 효율적으로 작성할 수 있는 방법이 있을 것 같았다.
아무리 컴포넌트 기준으로 스타일링을 작성하고 global.css를 사용하더라도 중복되는 스타일링을 계속 사용하는게 비효율적이라고 느꼈다.
그래서 알게 된 것이 바로
디자인 시스템 !!!
디자인 시스템이란 간단하게 서비스를 만드는 데 사용하는 공통된 컬러, 폰트... 등등 여러 컴포넌트(디자인 스타일의 규칙, 가이드 라인)를 정리해 놓은 것이다.
리픽 서비스를 개발할 때 디자이너들의 작업물을 보고 이를 웹으로 구현하는 과정에서 자연스럽게 디자인 시스템의 개념을 숙지했다.
이미 정해진 컬러, 폰트, 사이즈 등이 있었기 때문에 이를 그대로 구현하기만 하면 됐는데 문제는 styled-components를 사용하면서 스타일 코드의 중복의 비효율성을 느끼면서도 시간적인 제약으로 비효율적인 코드를 작성할 수 밖에 없었다.
그래서 스타일 코드의 중복을 어떻게 줄이고 디자인 시스템을 어떻게 적용할 것인가!!
바로 styled-components의 ThemeProvider를 사용하는 것이다!
import { css } from 'styled-components';
const color = {
black: '#000000',
white: '#ffffff',
gray: '#424242',
lightGray: '#c4c4c4',
};
export const alignCenter = css`
display: flex;
align-items: center;
`;
...
const theme = {
color,
};
export default theme;
import styled, { ThemeProvider } from 'styled-components';
import theme, { alignCenter } from '../style/theme';
return (
<Contatiner>
<ThemeProvider theme={theme}>
...
const SearchBox = styled.input`
...
color: ${({ theme }) => theme.color.white};
background: ${({ theme }) => theme.color.gray};
`;
ThemeProvider는 React의 Context API를 사용해서 설정한 값들을 하위 컴포넌트들에게 전달해준다.
최상위 컴포넌트에 ThemeProvider를 감싸주고 props.theme에 접근해서 사용할 수 있다.
위의 방식처럼 color 뿐만 아니라 font-size나 font-weight등 필요한 스타일링을 전역으로 관리할 수 있다.
컴포넌트가 증가하고 코드의 길이가 길어지면 스타일 속성이 복잡해지면서 확인하기 어려워진다.
하지만 이렇게 전역으로 관리해주면 유지 보수가 용이하고 코드 재사용도 가능하고 협업 시 굉장히 도움이 될 것 같다!
또한 리픽을 하면서 알게 된 방법인데 styled-components 작성 시
return (
<>
<Content.Title>
<Image
src={small_logo}
alt="Small Logo"
style={{ width: '31px', height: '31px' }}
/>
<Content.TitleText>{titleText}</Content.TitleText>
</Content.Title>
<Content.Sub
...
</>
);
const Content = {
Title: styled.div`
display: flex;
gap: 8px;
margin-bottom: 16px;
`,
TitleText: styled.p`
color: ${(props) => props.theme.colors.main};
...
`,
Sub: styled.p<{ $contentPosition?: string }>`
...
};
이렇게 dot(.)을 사용해서 중첩으로 스타일을 정의할 수 있다.
이 방법을 사용하기 전에는 네이밍 아이디어도 고갈되고 코드가 길어지면 해당 스타일을 찾기 너무 불편했는데
이 방법을 사용하니 코드를 훨씬 깔끔하게 유지할 수 있었고 관련된 스타일을 한 곳에서 정리할 수 있어서 편리했다.
^^ 더 좋은 스타일링 방법이 있으면 다시.. 끄적이러 와야징
'CEOS_Front' 카테고리의 다른 글
react-messenger-refactoring (1) | 2023.10.15 |
---|---|
react-todo-refactoring (1) | 2023.10.05 |
Week_5,6 (0) | 2023.05.22 |
Week_3,4 (1) | 2023.05.08 |
Week_2 (4) | 2023.03.27 |