react에서 style 모듈로 사용해서 중복 줄이기

react프로젝트에서 사용되는 styled-components 모듈을 이용해, 반복되는 스타일 코드를 줄이고, 모듈화 할 수 있는 두가지 방법에 대해 알아보자.
첫번째는 css 스타일을 변수로 생성하는 방법
두번째는 스타일을 컴포넌트로 생성하는 방법이다.

첫번째방법

반복적으로 사용하는 css를 변수로 생성하여 중복을 줄일 수 있는 방법이 있다. styled-components의 css기능을 사용하면 된다.

//	/styles/styleConstants.js

import { css } from 'styled-components'

export const defaultInput = css`
  height: 54px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.6rem;
`

styles 폴더 안에 js 파일을 만들어, css 변수를 생성 export를 해준다.

//	/components/share/BaseInput.js

import styled from 'styled-components'
import { defaultInput } from '../../styles/styleConstants'

const Wrapper = styled.div`
  .form-label {
    ${defaultInput}		<-- 이런식으로 변수를 적용하면 된다.
  }
`

---

---

두번째 방법

스타일을 컴포넌트로 생성하는 방법이다.

//	/components/styled/BaseInputStyled.js

import styled from 'styled-components'
import { defaultInput, defaultInputLabel, defaultInputPlaceholder } from '../../styles/styleConstants';

const Wrapper = styled.div`
  .form-label {
    ${defaultInputLabel}
  }
  .form-control {
    ${defaultInput}
    &::placeholder {
      ${defaultInputPlaceholder}
    }
    &:valid {
      border-color: #E5E5E5;
      background-image: none;
      &:focus {
        border-color: #86b7fe;;
        box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
      }
    }
    &:invalid {
      background-image: none;
    }
  }
  .invalid-feedback {
    color: #FF0000;
    font-size: 1.4rem;
    font-weight: 300;
  }
`

export default function BaseInputStyled({ children }) {
  return <Wrapper>{children}</Wrapper>		<-- children을 props로 받아 랜더링
}

BaseInputStyled 에서 중복되는 기본 스타일을 적용하여 컴포넌트로 생성, 적용이 필요한 컴포넌트를 래핑하면 자연스럽게 적용된다.
아래는 적용하는 코드이다.

//	/components/share/BaseInputButton.js

import BaseInputStyled from '../styled/BaseInputStyled'

export default function BaseInputButton () {
  return (
    <BaseInputStyled>
      <Form.Group className="mb-3" controlId={controlId}>
        {inputLabel && (
          <Form.Label>{inputLabel}</Form.Label>
        )}
        <Form.Control value={value} onChange={e => handler(e)} required type={type} placeholder={placeholder} />
        <Form.Control.Feedback type="invalid">
          {feedback}
        </Form.Control.Feedback>
      </Form.Group>
    </BaseInputStyled>
    )
}