React CSS 스타일링 가이드
React에서 CSS 적용하는 다양한 방법 알아보기
React 프로젝트에서 CSS 적용 방법은 다양해. 상황에 맞춰 적절한 방법을 선택하면 돼.
1. 일반 CSS 파일 Import
가장 기본적이야. .css 파일을 만들고 컴포넌트 파일에서 import 문으로 불러와 사용하면 돼.
// src/App.js
import './App.css'; // 같은 디렉토리
// import '../styles/global.css'; // 다른 디렉토리
function App() {
return <div className="my-class">Hello React!</div>;
}
2. 인라인 스타일 (Inline Styles)
JSX 요소에 직접 스타일 객체를 전달하는 방식이야. JS 객체로 정의하고 style prop에 넘겨주면 됨. 속성은 카멜케이스(camelCase)로 작성해야 해.
// src/MyComponent.js
function MyComponent() {
const myStyles = { backgroundColor: 'red', color: 'white' };
return <div style={myStyles}>Hello, world!</div>;
}
3. CSS Modules
클래스 이름 충돌 방지에 좋아. .module.css 확장자를 사용하면 클래스명이 자동으로 고유하게 스코프 처리돼.
/* src/MyComponent.module.css */
.title {
color: blue;
font-size: 20px;
}
// src/MyComponent.js
import styles from './MyComponent.module.css';
function MyComponent() {
return <h1 className={styles.title}>CSS Modules!</h1>;
}
4. Styled Components
CSS-in-JS 라이브러리야. JS 코드 안에서 백틱(`)으로 CSS를 작성하고, 컴포넌트를 생성하는 방식이야.
npm install styled-components
# 또는
yarn add styled-components
// src/MyComponent.js
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: green;
color: white;
padding: 10px 20px;
`;
function MyComponent() {
return <StyledButton>Click Me</StyledButton>;
}
여기서 배울 것
- React에서 일반 CSS 파일을 import하여 사용하는 방법을 익혀야 함.
- 인라인 스타일은 JS 객체로 스타일을 정의하고 `style` prop에 적용할 수 있음.
- CSS Modules를 사용하면 클래스 이름 충돌 없이 로컬 스코프 CSS를 만들 수 있음.
- Styled Components는 JS 코드 내에서 CSS를 작성하여 컴포넌트와 스타일을 결합하는 방식임.
원본 파일 보기 (.claude/skills/tn-react-css-import/SKILL.md)
---
name: React CSS Import 및 스타일링
description: Use when the user asks how to import and apply CSS styles in a React project, covering methods like standard import, inline styles, CSS Modules, and Styled Components.
version: 1.0.0
source: /home/son/prj/resume/backup_notes_260317/notion/Tech Note/react css import 01c701463c7e44f9bf27580c87c7f015.md
---
# react css import
conc
[https://goddaehee.tistory.com/304](https://goddaehee.tistory.com/304)
# React CSS Import
## Importing CSS
To import CSS in React, you can use the `import` statement in your JavaScript file. For example, let's say you have a CSS file named `styles.css` in the same directory as your JavaScript file. You can import it like this:
```
import './styles.css';
```
You can also import CSS from a different directory. For example:
```
import '../styles/styles.css';
```
## Using CSS
Once you have imported your CSS file, you can use it in your React components. There are several ways to do this:
### Inline styles
```
const styles = {
backgroundColor: 'red',
color: 'white',
padding: '10px'
};
function MyComponent() {
return (
<div style={styles}>Hello, world!</div>
);
}
```
### CSS Modules
CSS Modules are a way to locally scope CSS by automatically generating unique class names. To use CSS Modules in React, you need to enable them in your webpack configuration file. Once enabled, you can import CSS files as modules and use them in your components. For example:
```
/* styles.module.css */
.myClass {
background-color: red;
color: white;
padding: 10px;
}
```
```
import styles from './styles.module.css';
function MyComponent() {
return (
<div className={styles.myClass}>Hello, world!</div>
);
}
```
### Styled Components
Styled Components are a way to write CSS in JavaScript using tagged template literals. To use Styled Components in React, you need to install the `styled-components` package. Once installed, you can create styled components by defining a template literal and passing it to the `styled` function. For example:
```
import styled from 'styled-components';
const StyledDiv = styled.div`
background-color: red;
color: white;
padding: 10px;
`;
function MyComponent() {
return (
<StyledDiv>Hello, world!</StyledDiv>
);
}
```
## Conclusion
In this document, we have covered different ways to import and use CSS in React. Choose the method that best suits your needs and have fun styling your React components!