[React] 공용 스타일 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자

▶공용 스타일 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자

이번 글에서는 스타일 컴포넌트를 재활용 하는 방법에 대해 알아보겠습니다.

 

🔎 언제 쓰는데?

---

만약 Login 컴포넌트와 Signup 컴포넌트를 만든다고 합니다.

그런데 이 안에 들어가는 스타일 컴포넌트가 중복되는 경우가 있을 수 있습니다.

 

가령 예를 들어 가장 바깥쪽 Form의 형태나 input이 들어가는 박스의 크기 등이 있습니다.

 

이때 Login 컴포넌트와 Signup 컴포넌트에 똑같은 스타일 컴포넌트를 작성하지 말고

또 다른 js 파일로 스타일 컴포넌트를 모아놓고 import 해서 사용하면 코드를 1/2로 줄일 수 있을 거 같습니다.

 

🔎 적용해보기

---

지금 저는 Form이라는 폴더에 Login과 Signup 폴더를 따로 두어 분리를 했습니다.

이제 Login과 Signup에서 공용으로 사용할 스타일 컴포넌트들을 아래 보이는 style.js 파일에 모아두려고 합니다.

이제 style.js 파일에서 공용으로 사용할 스타일 컴포넌트를 작성해 줍니다.

저는 아래와 같이 작성했습니다.

모든 스타일 컴포넌트를 하나하나 export 해주었습니다.

const { default: styled } = require('styled-components');
const { flexCenter } = require('styles/common');

export const Form = styled.form`
  width: 360px;
  background-color: ${({ theme }) => theme.PALETTE.white};
  ${flexCenter};
  flex-direction: column;
  padding: 32px 0 0 0;
`;

export const InputBox = styled.div`
  width: 80%;
  height: 48px;
  ${flexCenter};
  position: relative;
  margin-bottom: 16px;

  & input {
    width: 100%;
    border: 1px solid #999;
    border-radius: 5px;
    height: 100%;
    text-align: center;
  }

  & span {
    position: absolute;
    left: 15px;
    top: -5px;
    font-size: ${({ theme }) => theme.FONT_SIZE.small};
    background-color: ${({ theme }) => theme.PALETTE.white};
    z-index: 1;
    padding: 0 5px;
  }
`;

 

이제 이 모아둔 스타일 컴포넌트를 사용할 파일로 돌아옵니다.

우리는 style.js 파일에 작성해둔 스타일 컴포넌트를 모두 사용하려고 합니다.

import * as S from '../style';

위와 같이 모든 스타일 컴포넌트를 S라는 별칭으로 불러왔습니다.

 

❓ 명칭을 굳이 주는 이유

나중에 스타일 컴포넌트나 일반 엘리먼트가 많아지면 구분하여 보는 것이 쉽지 않아집니다.

따라서 별칭을 통해 접근하는 것을 명시적으로 작성해 주면 구분하여 보기 쉬울 것입니다.

 

📄 Login.js 파일

import * as S from '../style';

function LoginForm() {
  return (
    <S.Form>
      <S.InputBox>
        <input placeholder="e-mail" />
        <span>이메일</span>
      </S.InputBox>
      <S.InputBox>
        <input type="password" placeholder="password" />
        <span>비밀번호</span>
      </S.InputBox>
    </S.Form>
  );
}
export default LoginForm;

위 코드와 같이 스타일 컴포넌트는 S를 통해 접근하는 것을 명시적으로 작성하면서 다른 개발자들이 보았을 때도 구분하여 볼 수 있도록 합니다.