react_css 파일 분리(styled-component 사용)

이번 프로젝트를 진행하면서 css는 재사용이 가능한 styled-component를 사용하였다.

그나마도 중복 코드 줄이고 간단하게 작성했다 생각했는데 페이지와 기능이 많아지며 코드의 양이 길어지게 되니 한 파일안에 코드가 기본 300줄 이상,,,엄청나게 늘어나는 문제가 생겼다.

그 때문에 가독성도 떨어지고 편하자고 사용했던 styled component가 더 불편해지기 시작했다.
이 문제에 대해서 선택했던 해결 방안은 styld-component 파일을 분리하는 것이다.

---

분리 방법

본래 Main.jsx, Login.jsx 파일로만 구성되었던 각각의 폴더에 styled.js 파일을 추가해서 styled-component 코드를 보냈다.

당연히 코드만 옮긴다고 끝나는 건 아니고 ,, import와 export 처리가 필요하다.

styled.js에는 styled를 import 해줘야 하고 각각의 컴포넌트에 export 를 해줘야 한다.

//styled.js

import styled from "styled-components";

export const Main = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 60px 0px;
  min-height: 100vh;
`;

jsx 파일에도 import 를 해줘야 한다.

//main.jsx

import * as S from "./styled";

const a = () => {
	return (
    	<S.Main>
     		<S.LogoFont>
     			<span className="font">FONT</span>
      		</S.LogoFont>
     	</S.Main>
 	)
 }

import 에 as S를 붙여 주는 것은 식별자 충돌을 방지하기 위함이다.
(별칭은 S말고 자유롭게 지정해도 무방)

우리는 파일명을 styled로 통일했고 충돌이 일어날 만큼 파일이 많지 않았기에 크게 상관없지만 파일이 많아지고 변수가 많아지면 어디에선가..충돌이 일어날 수 있기 때문에 그를 방지하는 처리 인 것 같다.

사용할 때는 한 파일에 있을 때처럼 컴포넌트 적용을 해주고 앞에 설정한 S.를 붙여주면 된다.

이렇게 간단한 방법으로 코드를 분리하니 가독성도 훨씬 좋아지고 작업 환경도 좋아진 것 같다.
공부를 계속 이어나갈 수록 코드 최적화에 대한 고민이 많아지고 중요성도 깨닫고 있는 중인데 component를 분리하는 이 방법도 최적화에 좋은 방식중에 하나인 것 같다 :)

---

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export