📌 React에 CSS 적용하기
create-react-app으로 만든 React 프로젝트에서는 CSS를 사용하기 위해 따로 설정할 필요가 없습니다.
기본적으로 CSS를 다룰 수 있도록 준비되어 있습니다.
- css-loader
@import, url() 등 CSS 파일에서 다른 파일을 불러오거나 이미지를 사용할 수 있게 도와줌 - style-loader
<style> 태그를 통해 CSS를 DOM에 적용
📌 React에서 CSS 처리방법
- Import (전역 방식)
- 인라인(inline) 스타일
- CSS Module (클래스명이 고유한 해시값으로 변환)
- Styled-Components 라이브러리
🔎 Import (전역 방식)
가장 기본적인 방법으로, 컴포넌트에서 CSS 파일을 직접 import하여 사용합니다.
className 속성을 사용하여 외부 CSS 파일에 정의된 스타일을 엘리먼트에 적용할 수 있습니다.
하지만, 글로벌 범위로 적용되기 때문에
클래스명이 중복되거나 다른 컴포넌트와 충돌할 가능성이 있습니다.
이 문제는 규모가 큰 애플리케이션에서 관리하기 어렵습니다.
이를 해결하기 위해 CSS Module을 사용하면, 클래스명 충돌을 방지할 수 있습니다.
📝 import 형태
import '파일명.css';사용예시
📜 app.tsx
import React from 'react';
import './styles.css'; // 전역 css 파일 사용
export default function (){
return <div>
<div className="nameBox">A</div>
<div className="nameBox">B</div>
</div>
}
📜 styles.css
.nameBox {
color: yellow;
background-color: black;
}
🔎 인라인(inline) 스타일
HTML 태그에 직접 스타일을 적용하는 방식으로, style={ } 형식을 사용하여 객체 형태로 작성합니다.
CSS 속성명에 -가 있는 경우, 자바스크립트에서는 카멜표기법(camelCase)으로 대체됩니다.
예를 들어, background-color는 backgroundColor로 작성해야 합니다.
인라인 스타일은 가장 높은 우선순위를 가지기 때문에, 다른 스타일보다 우선 적용됩니다.
📝 인라인(inline) 형태
style={{ css속성: 값, css속성: 값 }}사용예시
📜 app.tsx
import React from 'react';
export default function (){
return <div>
<div style={{ color: "red", backgroundColor: "magenta" }}>A</div>
</div>
}
🔎 CSS Module (클래스명 고유 해시값 생성)
CSS Module을 사용하면 클래스명이 충돌하는 문제를 해결하고,
컴포넌트 단위로 스타일을 캡슐화할 수 있습니다.
CSS 파일을 import한 후,
클래스명이 고유한 해시값으로 변환되어 다른 파일과 스타일 충돌을 방지합니다.
또한, :global 키워드를 사용하여 전역 선택자를 선언할 수도 있습니다.
- 클래스명 앞에 해시값 : 원래 클래스명에 해시값이 붙어 고유한 클래스명이 됩니다.
- .nameBox ➡️ nameBox__abc123
- 렌더링 예 ➡️ <div class="nameBox__abc123">CSS Module 디자인</div>
📝 CSS Module 사용방법
// 1️⃣ CSS파일 확장자
// .module.css로 끝나야 한다.
// ex) "📜style.module.css" 파일 생성
// 2️⃣ import 방법
import 모듈참조변수명 from "./모듈명.module.css";
// ex) import style from "./style.module.css";
// 3️⃣ 모듈 적용
{모듈참조변수명.파일에정의된사용할클래스명}
// ex) {style.nameBox}
사용예시
📜 app.tsx
import React from 'react';
import style from "./style.module.css"; // CSS Module 사용
export default function (){
return <div>
<div className={style.nameBox}>CSS Module 디자인</div> {/* CSS Module로 스타일 적용 */}
<div className="title">전역 선택자 적용</div> {/* CSS 모듈의 전역 선택자 적용 */}
</div>
}
📜 style.module.css
.nameBox {
color: yellow;
background-color: black;
}
/* 전역 선택자로 이름 정하기 */
:global .title {
color: pink;
font-weight: 900;
}
➕ 타입스크립트에서 CSS확장자 인식 오류 시
"📜global.d.ts" 파일을 새로 생성합니다. (.tsx가 있는 위치에 저장)
자료형 인식 문제를 해결하기 위해 다음 내용을 추가합니다.
declare module "*.css" {
const content: {[className: string]: string};
export = content;
}
🔎 Styled-Components 라이브러리
CSS in JavaScript 방식으로, 스타일을 CSS 파일 대신
JavaScript로 작성된 컴포넌트 안에 삽입하는 방식입니다.
이 라이브러리는 클래스명을 해시값으로 자동 생성하여 클래스명 충돌을 방지하며,
자바스크립트의 동적인 값을 활용할 수 있습니다.
- 클래스명 변경 : HTML 태그의 클래스명이 완전히 고유한 해시값으로 바뀝니다.
- Div ➡️ sc-AxirZ
- 렌더링 예 ➡️ <div class="sc-AxirZ">Styles A</div>
✅ Styled Components 라이브러리 설치
npm i styled-components📝 Styled Components 사용방법
스타일링을 원하는 태그명을 변수로 작성합니다.
styled.태그명 뒤에 백틱(``)을 넣고, 그 안에 원하는 CSS 스타일을 작성합니다.
const 컴포넌트명 = styled.html태그명`
부여하고자 하는 css속성
`;
// 1️⃣ Styled Components 정의
// color가 다른 h4를 여러 개 만들고 싶을 때 props를 만들어 개별 적용할 수 있습니다.
const 태그이름작명 = styled.h4`
font-size: 25px;
color: ${props => props.색상};
`;
// 2️⃣ Styled Components 적용
<태그이름작명 색상="red"> h4로 만든 콘텐츠 </태그이름작명>
사용예시
📜 app.tsx
import React from 'react';
import styled from 'styled-components'; // 스타일 컴포넌트 임포트
interface Props {
font?: string; // font prop 정의
}
const DivTag = styled.div<Props>`
background-color: pink;
font-size: ${(props) => props.font === 'medium' ? '15px' : '20px'};
`;
export default function (){
return <div>
<DivTag font='medium'>Styles A</DivTag>
<DivTag font='large'>Styles B</DivTag>
<DivTag>Styles C</DivTag>
</div>
}
