styled 컴포넌트 파일 분리하기?

황준·2023년 2월 7일

위 블로그를 보았다. 스타일드 컴포넌트는 부트캠프에서 가르쳐준 라이브러리 css로
이번 프로젝트에서도 많이 사용하였다.

컴포넌트화 하고 시멘틱하게 이름을 지어 사용한다는 장점이 있었고,
라이브러리나 다른 css들을 커스텀하여 사용할 수 있다는 장점이 있다.

그런데 이 라이브러리에 단점은 코드가 많이 길어진다는 단점이 있다.

import에서 위아래 왔다갔다하며 파일 만지는 일은 상당히 번거롭고

100줄이상 되는 코드들은 지저분하고 기가 빨린다.

그래서

위처럼 styled.js라는 파일을 만들어서 따로 보관하는 방법을 찾았다.

위 방법을 사용하니 아쉬웠던 점은 아토믹 패턴처럼 컴포넌트화 하려고 노력중이었는데,
그 개개인의 컴포넌트들에 styled.js 파일을 만들어 줄수는 없겠다고 생각이 들었고,
폴더를 하나씩 새로 만들어줘야하는 번거로움이 있어서 폴더관리에서도 아쉬움이 느껴졌다.

어떤 회사는 스타일드 컴포넌트로 선언한 파일을 맨 마지막으로 내린 뒤 빌드한다고 들었는데,
회사마다 차이가 조금씩 있는거 같았고, 주관적으로 느끼기에 어느것이 좋다고 말하기 어려웠다.

나중에 사용할 날이 온다면 회사가 쓰는 디자인 패턴과 사수의 말에 맞춰 판단해야겠다.

잘하고 싶은 사람