next-netflix-refactoring

 

지난 두 과제의 리팩토링에서는 렌더링 최적화와 에러 해결에 집중했다면 이번 과제 리팩토링에서는 디자인에 신경을 써봤다.

 

지금까지는 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(.)을 사용해서 중첩으로 스타일을 정의할 수 있다.

 

이 방법을 사용하기 전에는 네이밍 아이디어도 고갈되고 코드가 길어지면 해당 스타일을 찾기 너무 불편했는데

이 방법을 사용하니 코드를 훨씬 깔끔하게 유지할 수 있었고 관련된 스타일을 한 곳에서 정리할 수 있어서 편리했다.

 

 

 

^^ 더 좋은 스타일링 방법이 있으면 다시.. 끄적이러 와야징