React & Styled-Component - 재사용성 높히는 방법 고찰

포스팅 타이틀

코드만 보고 싶다면? 가장 아래에 있는 코드샌드박스 확인하기

 

한 화면에 세로로 나열되는 버튼의 개수에 따라, 버튼의 사이즈를 조절해 보고 싶었다. SASS를 사용할 때를 기억하여 "how to use variables in styled components?" 로 검색해 보았으나 최신 자료가 잘 안 나와서, 공식 문서를 참고하여 props를 이용해서 구현해 보았다.

 

버튼이 두개일 때는 height: 60px를, 

 

 

 

버튼이 네개일 때는 height: 40px를 주고 싶다.

 

 

 

 

현재 이 프로젝트에서는 React, Styled Components를 사용하고 있다.

1.재사용 할 법한 css 속성들을 js 파일로 분리한다.

 

여기까지는 쉽다. 그냥 객체를 export 하는 코드이다.

variable.js

const variable = {
  height2: '60px',
  height4: '40px',
};

export default variable;

 

 

2. Component를 작성할 때 template literal을 통해 불러온다.

template literal이 무엇인지에 대해서는 MDN을 참고하자. 링크

 

크게 두 가지 방법을 사용했다.

1) Styled Component에서 color: ${palette.clearChill} 하여 사용 (palette.clearChill은 '#123123')

2) Component props로 size={variable[`height${choicesTwo.length}`]}를 불러와서 사용.

 

variable[`height${choicesTwo.length}`]가 어려워 보이지만 별 것 아니다.

먼저 안에 있는 `height${choicesTwo.length}`의 경우 템플릿 리터럴에 의해서 'height2'라는 String이 되어 위의 코드는 variable[`height2`]가 된다.

그 다음으로 variable['height2']는 variable.height2와 같다.(객체 안의 값을 가져오는 두 가지 방법)

 위에서 분리했던  variable 객체의 경우에 height2 에 대한 값은 '60px'이므로, size prop은 '60px'를 넘겨주는 것이다.

 

App.js

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
// 분리한 파일 임포트
import variable from "./variable";
import palette from "./palette";

const ButtonBlock = styled.div`
  width: 80%;
  height: ${props => props.size || "40px"};
  border: 0.5px solid ${palette.clearChill};
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${palette.clearChill};
`;

const Button = ({ choice, size }) => {
  return <ButtonBlock size={size}>{choice}</ButtonBlock>;
};

const App = () => {
  const choicesTwo = ["예", "아니오"];
  return (
    <div className="App">
      <h2>두개일 경우</h2>
      <p>
        Button 의 Size Prop :{" "}
        <strong>{variable[`height${choicesTwo.length}`]}</strong>
      </p>
      {choicesTwo.map((choice, index) => {
        return (
          <Button
            size={variable[`height${choicesTwo.length}`]}
            choice={choice}
            key={`button-${index}`}
          />
        );
      })}
    </div>
  );
};

 

이렇게 색깔, 혹은 픽셀과 관련한 정보를 모아서 관리하게 되면, 나중에 유지보수가 용이해진다는 장점이 있다.