[React] 재사용성 높이는 styled-components 분리

프로젝트를 진행하다 보면 같은 내용의 style를 여러 곳에서 똑같이 사용해야 할 때가 있다. 이때 styled-components의 분리를 통해 효율적으로 사용할 수 있다. 중복을 방지하고 재사용성을 높일 수 있는 styled-components 분리 방법에 대해 알아보겠다.

🎨 기본 사용법 (in 하나의 파일)

$ npm install styled-components

일반적으로 하나의 파일에서 styled-components를 함께 사용하는 코드이다. import를 한 뒤 사용을 해야 하며, 추가적인 작업 없이 생성한 컴포넌트명을 호출하여 바로 사용할 수 있다.

import styled from 'styled-components';

const Test = () => {
    return <Btn>yes</Btn>;
};

export default Test;

const Btn = styled.button`
    //코드 작성
`;

🎨 styled-components 분리하기

파일 분리를 통해 재사용을 할 것이기 때문에 export와 import를 사용한다.

🌠 export

styled-components를 모을 파일을 먼저 만들고, 각각의 컴포넌트에export를 붙여 다른 파일에서도 사용하도록 한다. 만약 하나의 컴포넌트만 만들 경우 export default를 붙이면 된다.

import styled from "styled-components";

export const A = styled.div`
    padding: 0 2em;
`;

export const B = styled.div`
    padding-left: 1.2em;
`;

🌠 import

이제 위에서 만든 파일을 가져와야 한다. 따라서 import를 통해 해당 파일을 불러온다.

import * as 별칭 from '파일경로'; //export로 내보낸 경우
import { 컴포넌트명 } from '파일경로'; //export default로 내보낸 경우

export dafault는 호출하여 바로 사용하면 되고, export의 경우, 컴포넌트가 많기 때문에 *로 모든 파일을 가져온다. 각각의 컴포넌트를 사용할 때에는 위의 as 뒤에 입력한 별칭을 앞에 붙여 호출할 것이다.

import styled from 'styled-components';
import * as t from '../../styles/StyleTest';

const Test = () => {
    return (
        <t.A>
            <t.B>test</t.B>
        </t.A>
    );
};

export default Test;

위의 코드는 't' 라는 별칭으로 styled-components를 모은 파일을 불러왔다. 따라서 각각의 컴포넌트를 사용하기 위해 '별칭.컴포넌트명'으로 사용하면 된다.

cf)
https://velog.io/@swimme/TIL-React-styled-components
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export