Cannot read properties of null ...
분명 styled components 오류가 맞는데 왜 나는지 몰라서 찾아보았다.
-> 버전이 맞지 않는 것
-> 해결: npm install styled-components 하고 또 npm install styled-components@latest 하면 된다.
장점
- 향상된 CSS 구성 : styled-componentsJavaScript 코드와 동일한 파일에 CSS를 작성할 수 있으므로 관련 코드를 함께 유지하여 구성을 개선할 수 있습니다. 이 접근 방식은 별도의 CSS 파일을 갖는 것보다 유지 관리가 더 쉬운 경우가 많습니다.
- 범위가 지정된 스타일 : 스타일의 범위는 구성 요소로 지정되어 충돌을 방지하고 부작용을 줄입니다. 즉, 한 구성 요소에 대해 정의한 스타일이 실수로 응용 프로그램의 다른 부분에 영향을 주지 않는다는 의미입니다.
- 동적 스타일링 : styled-componentsJavaScript의 기능을 활용하여 소품이나 전역 테마를 기반으로 스타일을 동적으로 생성합니다. 이는 애플리케이션 상태에 따라 스타일을 테마로 지정하거나 변경하는 데 특히 유용합니다.
- 클래스 이름 걱정 없음 : 라이브러리는 스타일에 대한 고유한 클래스 이름을 자동으로 생성하므로 이름 충돌이나 BEM 이름 지정 규칙에 대해 걱정할 필요가 없습니다.
- 테마 지정 및 테마 전환 : styled-components기본적으로 테마 지정 기능이 함께 제공됩니다. 테마 개체를 정의하고 스타일이 지정된 모든 구성 요소에서 쉽게 액세스할 수 있으므로 앱 전체에 일관된 모양과 느낌을 구현하거나 테마를 동적으로 전환하는 것이 간단해집니다.
- 강력한 도구 : styled-components생태계에는 개발 경험을 향상시킬 수 있는 구문 강조 및 스타일 린팅과 같은 도구 및 확장 기능이 포함되어 있습니다.
- 서버 측 렌더링 지원 : styled-components서버 측 렌더링에 대한 지원이 내장되어 있습니다. 이는 스타일을 서버에서 렌더링하고 초기 HTML 페이로드로 클라이언트에 보낼 수 있기 때문에 SEO 및 성능에 필수적입니다.
- 자동 공급업체 접두사 : 라이브러리는 필요한 공급업체 접두사를 CSS 규칙에 자동으로 적용하여 개발자의 추가 노력 없이도 다양한 브라우저 간의 호환성을 보장합니다.
- 사용하지 않는 스타일을 쉽게 삭제 : 구성 요소를 삭제하면 관련 스타일도 제거되므로 코드베이스를 깔끔하게 유지하고 사용하지 않는 코드의 양을 줄이는 데 도움이 됩니다.
- 구성 요소 꺼내기 : 스타일이 구성 요소에 연결되어 있기 때문에 여러 프로젝트 또는 팀 내에서 구성 요소를 추출하고 공유하는 것이 간단합니다.
비교
SCSS (Sassy CSS)
장점
- 변수 사용: 색상, 폰트 등을 변수로 저장하여 재사용이 용이합니다.
- 중첩 규칙: CSS 규칙을 중첩하여 가독성과 구조를 개선할 수 있습니다.
- 믹스인과 함수: 코드 재사용을 촉진하는 믹스인(mixins)과 함수를 제공합니다.
- 와일드카드 확장: 공통 스타일을 쉽게 확장하고 상속할 수 있습니다.
**단점- 초기 설정 필요: SCSS를 CSS로 컴파일하기 위한 초기 설정이 필요합니다.
- 복잡성: 중첩 규칙이 지나치게 복잡해질 수 있으며, 이로 인해 유지 관리가 어려워질 수 있습니다.
- 글로벌 스타일: 스타일이 전역적으로 적용되어 컴포넌트 간 스타일 충돌이 발생할 수 있습니다.
Styled Components
장점- 컴포넌트 기반: 각 컴포넌트에 스타일을 직접 적용하여 모듈성을 향상시킵니다.
- 자바스크립트 통합: 스타일을 자바스크립트 파일 내에서 관리하여 논리적인 스타일링이 가능합니다.
- 동적 스타일링: props나 상태에 따라 동적으로 스타일을 변경할 수 있습니다.
- 스타일 격리: 각 컴포넌트에 대한 스타일이 격리되어 있어 스타일 충돌을 방지합니다.
**단점- 성능 고려: 런타임에 스타일을 생성하므로, 성능에 영향을 줄 수 있습니다.
- 학습 곡선: 특히 전통적인 CSS에 익숙한 개발자에게는 새로운 패러다임을 학습해야 합니다.
- 서버 사이드 렌더링(SSR) 복잡성: SSR을 사용할 때 추가적인 구성이 필요할 수 있습니다.
**차이점 요약- 스타일링 접근: SCSS는 전통적인 CSS 확장 방식을 사용하는 반면, Styled Components는 컴포넌트 기반의 접근 방식을 사용합니다.
- 범위와 격리: SCSS는 전역적인 스타일링을 제공하는 반면, Styled Components는 컴포넌트별로 스타일을 격리합니다.
- 통합: Styled Components는 자바스크립트와의 통합이 더 긴밀하게 이루어집니다.
긍정 🍋🌻