React 컴포넌트 스타일링 방법

React 컴포넌트를 스타일링하는 다양한 방법이 존재합니다. 여기서는 그 중 기본적인 몇 가지를 살펴보겠습니다.

표준적인 접근법으로 웹 페이지를 일반적으로 스타일링할 때와 마찬가지로 전역 CSS를 사용할 수 있습니다. 이 경우 스타일이 포함된 하나의 외부 공통 CSS 파일을 생성합니다. 이 접근 방식에서는 모든 클래스 이름이 전역 범위에 있어 서로 간의 충돌이 발생할 수 있습니다. 또한 여러 개의 작은 CSS 파일을 만들 수도 있습니다. 이 방법은 규모가 크고 확장 가능한 애플리케이션을 구축할 때는 비효율적입니다.

다음 접근법은 인라인 스타일링입니다. 이를 사용하면 일반 HTML에서와 유사하게 CSS 스타일을 인라인으로 추가할 수 있습니다. 이 경우 style 속성을 사용하여 필요한 CSS 속성을 전달하게 됩니다. 이러한 스타일링 방식은 나쁜 습관으로 간주되며 주로 렌더링 중에 동적으로 계산되는 스타일을 추가할 때만 권장됩니다. 이 방법은 개별 컴포넌트의 인터페이스를 빠르게 프로토타이핑할 때 유용합니다.

다음으로 살펴볼 몇 가지 방법은 현대적이고 인기를 얻고 있으며 효율적인 스타일링 방식입니다. 이는 특히 규모가 크고 확장 가능한 React 애플리케이션을 스타일링할 때 적용하는 것을 권장하는 방법들입니다.

첫 번째는 템플릿 문자열을 사용하여 스타일링하는 Styled Components 라이브러리를 적용하는 것입니다. 이 방법을 사용하면 모든 기능을 활용하여 JS 코드에서 일반 CSS를 작성할 수 있습니다.

두 번째 방법은 CSS 모듈을 적용하는 것입니다. 이 경우 CSS 모듈은 기본적으로 모든 클래스 및 애니메이션 이름이 로컬 범위에 있는, 즉 이를 사용하는 컴포넌트 내부에서만 접근 가능한 CSS 파일입니다.

마지막 두 가지 방법에서는 클래스 이름 간의 충돌을 두려워할 필요가 없습니다. 왜냐하면 고유한 이름이 사용되며 로컬 범위 개념이 적용되기 때문입니다. 또한 이를 사용하면 BEM 방법론이 필요 없어집니다.

다음 강의들에서 여기서 언급한 모든 방법을 자세히 살펴보겠습니다.