일반 CSS
- 컴포넌트를 스타일링하는 가장 기본적인 방식
- CSS 클래스를 중복되지 않게 만드는 것이 중요
[이름 짓는 규칙]
- 이름-클래스 (예 : App-header)
- BEM 네이밍
- 일종의 규칙을 준수해 해당 클래스가 어떤 용도로 사용되는지 명확하게 작성
- .card_title-primary
- css Selector : 특정 클래스 내부에 있는 경우 스타일 적용
.App .logo {
text-align : center;
}
Sass
- 자주 사용되는 css 전처리기 중 하나
- 확장된 CSS 문법을 사용
- 복잡한 작업을 쉽게 해주고 재활용성을 높여주며 코드의 가독성을 높임
- .sass 확장자, .scss 확장자 모두 지원
- 여러 파일에서 사용되는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 불러와 사용
CSS Module
- CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해줌
- 확장자 : " .module.css "
- 흔히 사용하는 단어로 이름을 지어도 직접 불러온 컴포넌트 내부에서만 작동되므로 중복될 걱정할 필요 없음
- 전역적으로 사용되는 경우라면 :global을 앞에 입력하여 글로벌 CSS임을 명시
[classnames]
import classNames from 'classnames';
const MyComponent = ({ highlighted, theme }) => (
<div className = {classNames("MyComponent", {highlighted}, theme)}> Hello </div>
);
→ 위 엘리먼트의 클래스에 highlighted 값이 true이면 highlighted 클래스가 적용되고 false면 적용 안됨
styled-components
- 스타일을 자바스크립트 파일에 내장시키는 방식
- 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줌
[반응형 디자인]
media 쿼리
@media (max-width : 1024px) {
width : 768px;
}
@media (max-width : 768px) {
width : 100%;
}
'React' 카테고리의 다른 글
[React] 라우팅 (0) | 2023.03.30 |
---|---|
[React] immer를 사용해 불변성 유지 (0) | 2023.03.29 |
[React] Hooks (0) | 2023.03.23 |
[React] 컴포넌트의 라이프사이클 메서드 (0) | 2023.03.23 |
[React] 컴포넌트 반복 (0) | 2023.03.21 |