리액트로 컴포넌트를 작성하면 어떤 규칙으로 배치할 것인지 고민하게 된다. 극단적으로 작성하면, 파일 하나에도 다 몰아넣을 수도 있다. 때문에 기준은 항상 더 파악하기 쉽고, 관리하거나 추가할 때 효율적으로 작성하는 것이다.
리액트의 경우, 컴포넌트 스타일 라이브러리를 동반하는 경우가 많다. 내 경우는 전적으로 styled-components를 활용했다. 하지만 이번에는 여태까지 많은 동료들이 추천했던 tailwind를 활용할 예정이다. tailwind의 경우, 클래스를 활용해 스타일을 작성하는, html-css에서 익숙한 스타일 방식을 활용한다. 추가로 컴포넌트 코드를 작성하지도 않기 때문에, 코드량 자체에도 유리할 것으로 기대된다.
추가 사항
분명, 테일윈드를 쓸 계획이었는데 회사 일정과 맞물려서 도저히 시간이 나질 않았다. 일단 styled-components로 급선회했다.. 또한 안드로이드 파트에서 Mui를 도입한다고 하여, 마찬가지로 ui와 아이콘을 활용할 계획이다.
yarn add styled-components @types/styled-components
스타일드 컴포넌트는 꾸미려는 컴포넌트와 동일한 이름으로 .style.ts파일을 생성하는 방식으로, 각 컴포넌트의 최상단 컴포넌트를 Wrapper로 작성하였다.
컴포넌트 명을 작성함에 있어서는 컨텍스트를 포함하지 않고 최대한 간결하게 작성하고자 했다.
그리고 스타일드 컴포넌트에서 제공하는 themeProvider와 GlobalStyle, styled-reset을 활용하여, 스타일 재사용성을 높이고 일괄적으로 관리할 계획을 세웠다.
yarn add reset
스타일드 컴포넌트를 활용할 때 일반적으로 스타일을 초기화하고, 공통적으로 적용시키려면 createGlobalStyle을 활용하여 GlobalStyle을 생성한다. 그리고 해당 스타일을 적용시키기 위한 최상위 컴포넌트에 GlobalStyle을 불러오면 된다. 프로젝트에서는 provider에서 불러왔다.
// src/lib/styled-components.ts
import { createGlobalStyle } froomm "styled-components";
export const GlobalStyles = createGlobalStyle``
// src/providers/app.tsx
...
import { GlobalStyles } from "lib/styled-components";
...
export const AppProvider = ({ children }: AppProviderProps) => {
return (
<>
<GlobalStyles />
<ThemeProvider theme={theme}>
<BrowserRouter>{children}</BrowserRouter>
</ThemeProvider>
</>
)
}
html태그에 기본적으로 적용된 스타일 초기화는 styled-reset을 활용하여 적용할 수 있다.
yarn add styled-reset
// src/lib/styled-components.ts
import { createGlobalStyle } froomm "styled-components";
import reset from "styled-reset";
export const GlobalStyles = createGlobalStyle`
${reset}
`
요랬던 애가
요렇게