[Art-on] 스프린트2 - 로그인페이지 UI 구현

김재만·2022년 11월 5일

리액트 컴포넌트

리액트로 컴포넌트를 작성하면 어떤 규칙으로 배치할 것인지 고민하게 된다. 극단적으로 작성하면, 파일 하나에도 다 몰아넣을 수도 있다. 때문에 기준은 항상 더 파악하기 쉽고, 관리하거나 추가할 때 효율적으로 작성하는 것이다.

컴포넌트 작성 규칙

1. 코드가 사용되는 위치와 가깝게 작성하기

2. 컴포넌트 내부에 컴포넌트 중첩 작성하지 않기

3. 코드 스타일가이드 지키기

스타일 라이브러리

리액트의 경우, 컴포넌트 스타일 라이브러리를 동반하는 경우가 많다. 내 경우는 전적으로 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}
`