스타일 컴포넌트 대신 SCSS를 사용해야 하는 이유는 무엇인가요?

일반 CSS와 같은 인기 있는 솔루션을 비교한 후 Emotion, SCSS 그리고 스타일 컴포넌트를 클릭한 후 최종적으로 마지막 항목을 선택했습니다. 모든 것이 괜찮아 보였습니다. 요즘 매우 인기있는 라이브러리가 있습니다.
이미 큰 커뮤니티가 있기 때문에 문제가 발생하면 Stack Overflow나 GitHub에서 해결책을 찾을 수 있을 것입니다. 그 외에도 스타일 컴포넌트 에는 필요할 때만 렌더링하는 최적화 기능이 있습니다. 그리고 프로젝트 는 React와 타입스크립트를 사용하여 빌드될 것으로 예상되었습니다. 이 라이브러리는 두 기술을 모두 지원합니다. 멋지지 않나요?

그때부터 코딩을 시작했습니다. 한 달 후 앱이 성장하자 프론트엔드에서 팀 기능을 제공하는 데 집중한 결과, 우리는 놀라운 스타일 컴포넌트 라이브러리에는 나름의 목표가 있었고 그 이유를 말씀드리겠습니다.

우선, 네이밍 규칙입니다. 차별화하기 위해 스타일 컴포넌트 React 컴포넌트를 사용해야 했습니다. 스타일링 접두사가 감소한 코드 가독성. 그리고 (이상할 수도 있지만) 타입스크립트 지원. 스타일 컴포넌트는 아시다시피 CSS-in-JS 접근 방식을 기반으로 합니다. 즉, 어떤 소품이든 전달하고 이 소품에 따라 입력 스타일을 변경할 수 있으며 개인적으로 이 기능이 정말 멋지다고 생각합니다. 또한 타입스크립트에서 이 프로퍼티의 유형을 구현하면 코드가 더 길어집니다. 스타일 컴포넌트. "하지만 5초 정도 더 걸리는데 뭐가 문제야?"라고 말할 수 있습니다. 맞습니다. 하지만 앱이 빠르게 확장되고 구성 요소 수가
가 증가하면 이 5초는 쉽게 수백 배로 늘어날 수 있습니다. 또 다른 문제는 스타일 컴포넌트.

일부 JS 개발자 구성 요소와 같은 파일에 배치하고 다른 구성 요소는 별도의 파일을 만듭니다. 두 가지 접근 방식 모두 여러 가지 이유로 좋습니다. 주로 컴포넌트의 복잡성에 따라 달라집니다. 이러한 기법 중 하나를 따르면 일관성을 유지할 수 있지만 병합하면 정반대의 결과를 가져올 수 있습니다. 우리는 CSS-in-JS 접근 방식을 포기하고 다음과 같이 마이그레이션했습니다. SCSS. 쉽고 빠르지는 않았지만 약간의 도움을 받아 만들었습니다. 우리는 BEM 방법론으로 HTML 태그의 스타일을 지정하기 시작했고, 물론 컴포넌트당 하나씩 별도의 파일에 스타일을 넣었습니다. JS 소품을 스타일 컴포넌트 은 멋진 기능이지만 SCSS 불가능합니다. 조건부 클래스를 코딩하려는 React의 구문이 끔찍하다는 점에도 모두 동의할 것입니다.

아주 흥미로운 해결책이 하나 있습니다. BEM 방법론과 clsx 라이브러리를 사용하면 다음과 같은 결과를 얻을 수 있습니다(이 라이브러리를 보여 준 제 친구 Przemek Adamczyk에게 큰 박수를 보냅니다).

훨씬 깔끔해 보이지 않나요?

가장 좋은 점은 컴포넌트 수준에서 조건 변수를 입력하기만 하면 된다는 것입니다.
스타일링 수준이 아닙니다. 정말 시간을 절약할 수 있습니다. 안타깝게도 이러한 솔루션에는 단점이 있습니다.
SCSS 는 쉽고 친숙하지만 Next.js와 함께 사용할 때는 주의해야 합니다. 이 프레임워크는
를 사용하면 스타일 파일을 컴포넌트 파일로 직접 가져올 수 있습니다(CSS 모듈만 해당).

컴포넌트당 하나의 파일을 선호하는 경우 다음을 생성해야 합니다. index.scss 모든 SCSS 파일과
로 가져와서 _app.tsx 파일을 만들 수 있습니다. 유일한 문제는 각 파일을 수동으로 가져와야 한다는 것입니다. SCSS 파일을 삭제해야 합니다. 하지만 React에서는 이 문제가 발생하지 않으며 다음을 가져올 수 있습니다. SCSS 파일을 원하는 곳에 저장하세요. 오해하지 마세요. 스타일 컴포넌트 는 정말 훌륭합니다. 앞서 말했듯이 JS 변수 전달과 글로벌 테마는 놀라운 기능입니다. 최적화가 중요한 대규모 앱을 구축하는 경우 이 라이브러리가 여러분의 요구를 충족시킬 것입니다. 하지만 저희의 경우에는 SCSS 대박을 터뜨리세요.

요약

결론적으로, 두 가지 모두 타당한 주장이 있지만 SCSS 및 스타일 컴포넌트 in 웹 개발 최종 결정은 다양한 요인에 따라 달라집니다. SCSS 에 더 익숙한 구문을 제공합니다. 숙련된 개발자 를 기존 CSS와 원활하게 통합하고 기존 코드 베이스 그리고 컴포넌트 라이브러리 .

반면에 스타일 컴포넌트 향상된 개발자 경험 컴포넌트 내에서 스타일을 캡슐화하고 스타일링 프로세스를 간소화하는 기능을 제공합니다. 또한 코드 모듈화와 재사용성을 촉진하여 프런트엔드 엔지니어가 효율적으로 구성 요소 디렉토리 에서 일관된 UI를 만들고 웹 앱 . 의 중요성을 고려할 때 사용자 데이터 보안과 성능을 고려할 때 두 가지 접근 방식이 최종 번들 크기와 로딩 시간에 미치는 영향을 평가하는 것이 중요합니다. 궁극적으로 다음 중 하나를 선택해야 합니다. SCSS 및 스타일 컴포넌트 는 프로젝트의 특정 요구 사항과 개발 팀 의 전반적인 목표와 웹 애플리케이션 . 개발자는 모든 요소를 평가하고 다음을 통해 최신 정보를 유지하는 것이 좋습니다. 블로그 게시물 및 업계 토론을 통해 프로젝트 요구사항에 부합하고 전체적인 프런트엔드 개발 프로세스 .