[React] 스타일 작업 방식 이대로 괜찮은가?

이 글은 2022년 7월에 작성된 것으로, RN으로 작업한 Inline Styling 방식이 Next.js로 진행된 웹 페이지의 스타일 작업 방식에 그대로 적용되었습니다. 그러나 RN과는 달리 디자인 요구 사항이 고도화되면서 Inline Styling 방식만으로는 스타일 코드를 관리하는 것이 어려워질 것으로 예상되어 팀 내에서 문제를 제기하고 다양한 해결 방안을 도출한 과정을 문서화한 것입니다.

현재 진행 중인 웹 프로젝트 CSS 적용 상태

• 날것 그대로의 Inline Styling
• 페이지단위로 styled component로 감싼 후 class 생성
  • 같은 스타일인데 이름만 다른 class가 생성되는 경우
  • 같은 이름의 class인데 스타일이 다른 경우
  • 같은 스타일 & class이지만 여러 페이지, 컴포넌트에 생성되는 경우
• 무한이 같은 기능의 CSS코드가 증식 되고 있음
  • display:flex; flex-direction: row;
  • 똑같은 스타일의 font-size, font-weight
  • 똑같은 간격의 padding, margin
• 프로젝트마다 대표 UI컴포넌트 라이브러리가 다름 (antd 또는 material 또는 bootstrap)
• 그렇다고 하나의 CSS 프레임워크만 사용하기엔 프로젝트 디자인 요구사항이 방대함
  • 수단과 방법을 가리지 않고 요구사항을 수행하는 것은 옳다 생각함! 단, 중간에 정리하는 시간이 없었음
• 회사 프로젝트 중 스타일가이드를 웹 프로젝트에 적용시킨 사례가 없음
  • 테스트 겸 앱 프로젝트에 있는 Color와 Typohgraphy를 가져와 Styled-component의 themeProvider에 적용한 것은 있지만 코드가 간결하지 않아서 개인적으로 매우 마음에 안 듦

const Styles = styled.div`
      ${({ theme: { typography } }) => typography.Title};
      color: ${Color.black};
`

해결방안

• 상황에 맞는 스타일 적용 방법 제시
  • Inline Styling은 사용하지 않는다
  • styled component는 분리된 컴포넌트에만 사용한다
    • 페이지 전체에 styled component로 감싸고 css 작업을 하는 것은 styled component 의미에 부합하지 않다고 생각함
  • Table 형태의 페이지를 많이 요구하는 어드민 프로젝트는 antd를 사용한다
    • antd에 존재하는 UI컴포넌트들이 관리자페이지에 특화된 기능이 많고 사용하기 간편함(필터기능, 정렬기능, 페이징 기능 등)

중복 css 코드를 방지하기 위해 Tailwind CSS처럼 유틸리티 클래스를 제공하는 css 프레임워크를 도입 검토 해본다

• antd 또는 material 가 제공하는 ThemeProvider를 활용하여 css 중복을 줄여보려고 했는데 의도와 다르게 코드만 더 방대해짐
• Tailwind CSS를 사용하면 중복된 스타일들을 미리 정의된 css로 처리 가능함
• 그러나 className이 매우 길어짐 → className 이 방대히 길어지는 게 싫어서 전용 syled component 라이브러리가 나옴.. (이럴 거면 왜 쓰는지..) Tailwind-syled-component 

많은 css 템플릿을 기반으로 프로젝트를 구축해보았으나 구축은 장점이 많은 반면 운영 유지보수 측면에서 매우 많은 이슈들이 발생했습니다.

• 프로젝트 시작 전 typography, color, space 정도의 스타일 가이드 생성 후 해당 스타일 가이드를 프로젝트에 적용하는 방식도 간결해야 됨

결론

• Inline Styling은 사용하지 않는다

또한 리액트 공식 문서에서 "JavaScript 변수에 의존하는 경우에만 style 속성을 사용하는 것이 좋습니다."라는 글이 있습니다.

인라인 스타일 적용으로 인해, 코드가 불필요하게 길어지고 개발자에 따라 같은 디자인을 적용함에도 달라지는 경우가 발생하는 것 같습니다.

• 개인적으로 styled-component 코드를 styles파일로 분리하는 것보다 tsx 파일 안에 통합되어 있으면 좋겠습니다. 별도로 styles파일을 관리하게 되면 파일구조가 복잡해지고 유지보수가 어렵다고 느낍니다. 

종합 의견 정리 및 추가 의견

• UI컴포넌트 라이브러리 & CSS 템플릿에 대한 의존성을 줄여나갑시다.
  • 빠른 구축을 할 수 있다는 장점이 있지만 사람마다 러닝커브가 존재하고 유지보수 및 인수인계가 어렵다는 의견이 나옴
  • Tailwind CSS는 러닝 커브가 존재하고 유지보수가 어렵다는 견해가 있으므로 도입 취소
  • antd의 <Table/> 컴포넌트처럼 고기능 UI 컴포넌트들은 사용하되 <Row/>, <Col/>처럼 flex용 컴포넌트들은 자체 구현이 가능하므로 작고 단순한 컴포넌트들부터 의존성을 없애는 방향으로 나가는 것이 좋아 보입니다.
• pure css를 최대한 유지하고 중복 스타일 코드를 해결하기 위해 styled-component 작업 방식을 고도화시키는 방향이 좋아 보입니다.
  • styled-component folder structure
  • styled-component의 짜증 유발 중 하나인 동적 props 이름 짓기 노고를 해결하기 위해 styled-system을 같이 사용해 보는 것도 좋아 보입니다.

•