해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.
Section 3. Styling Components
Make Your Apps Look Good
스타일링은 컴포넌트를 구축하는데에 있어서 중요하다.
특정 컴포넌트의 스타일에 영향 받지 않도록 다른 컴포넌트를 스타일링 하는 방법등의 다양한 기술들이 있다.
- Conditional & Dynamic Styles
- Styled Components
- CSS Modules
동적으로 CSS스타일 조정하는 방법
// inline style - 백틱 이용
return (
<form onSubmit={formSubmitHandler}>
<div className={`form-control ${!isValid ? 'invalid' : ''}`}>
<label>Course Goal</label>
<input type='text' onChange={goalInputChangeHandler} />
</div>
<Button type='submit'>Add Goal</Button>
</form>
);Styled Components
- 다른 컴포넌트에 CSS스타일을 영향을 주지 않는다.
- 특정 스타일이 첨부된 컴포넌트를 구축 할 수 있도록 도와주는 패키지
npm install --save styled-components
styled-components 패키지를 통해 컴포넌트를 만들고 개발자 도구 > 소스 를 확인해보면 class명이 특이하다는 것을 확인 할 수 있다.
이는 해당 패키지에서 고유한 클래스네임으로 변환 해준 것. 이 때문에 다른 컴포넌트엔 영향이 가지 않는 CSS스타일을 가진 컴포넌트를 구축 할 수 있다.
import React from "react";
// styled-components 패키지 이용하기
import styled from "styled-components";
// styled - 모든 html요소들의 메소드 가지고 있음 ex. p / h1 , h2 ...
// className을 따로 지정해주지 않아도 된다. 해당 button이란걸 알고 있기 때문
// 해당 클래스의 focus 등 식별자를 가리킬땐 가상선택자 & 를 사용한다.
const Button = styled.button`
font: inherit;
padding: 0.5rem 1.5rem;
border: 1px solid #8b005d;
color: white;
background: #8b005d;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
cursor: pointer;
&:focus {
outline: none;
}
&:hover,
&:active {
background: #ac0e77;
border-color: #ac0e77;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}
`;
export default Button;(1) styled-components 에서 props 를 이용하여 동적 클래스를 구현하는 방법
import React, { useState } from "react";
import Button from "../../UI/Button/Button";
import "./CourseInput.css";
import styled from "styled-components";
const FormControl = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
color: ${(props) => (props.invalid ? "red" : "black")};
}
& input {
display: block;
width: 100%;
border: 1px solid ${(props) => (props.invalid ? "red" : "#ccc")};
background: ${(props) => (props.invalid ? "#ffd7d7" : "transparent")};
font: inherit;
line-height: 1.5rem;
padding: 0 0.25rem;
}
& input:focus {
outline: none;
background: #fad0ec;
border-color: #8b005d;
}
`;
const CourseInput = (props) => {
...
const [isValid, setIsValid] = useState(true);
...
return (
<form onSubmit={formSubmitHandler}>
{/* CSS 스타일을 동적으로 변환하기 - inline style보다는 벡틱을 이용하여 동적으로 이용 */}
<FormControl invalid={!isValid}>
...
</FormControl>
...
</form>
);
};
export default CourseInput;(2) 미디어쿼리 이용하기
@media (min-width: 768px) {
.button {
width: auto;
}
}CSS Module
- 고유의 CSS 스타일과 클래스를 생성해주는 모듈
import styles (혹은 classes) from "./컴포넌트.module.css";// CSS 모듈 사용하기 Button.css -> Button.module.css name Change
import styles from "./Button.module.css";
// className -> className대신 styles 의 Object > className (css) 이용
// 우리가 사용하는 컴포넌트의 스타일로만 국한되게 할 수 있음
const Button = (props) => {
return (
<button type={props.type} className={styles.button} onClick={props.onClick}>
{props.children}
</button>
);
};정리하기
강의를 듣고 Styled-Components 와 CSS Module 에 관해 조금 더 생각을 해보았다.
Styled-Components ( CSS-in-JS )
스타일을 컴포넌트화 하는 부분이 가장 큰 장점이다.
이 부분을 통해 재사용성 증가되는 부분과 유지보수가 용이하다는 점을 가지고 올 수 있을것이다.
CSS Module
CSS파일과 JS 파일이 분리된 상태로 DOM이 처음 렌더링 될 때 모든 CSS 파일이 읽히기 때문에 재렌더링이 없는 장점을 가지고 있다.
Styled-Components 는 다른 애플리케이션에 통합되는 모듈에 유용하다는 점이 있으나 파일로 렌더링 되는 CSS가 병렬로 처리되고 해당 코드를 별도의 CSS파일로 렌더링 할 수 없기 때문에 속도가 느려진다는 단점이 있다.
또한, SCSS, Stylelint 등과 같은 접근 방식 및 유틸리티를 사용 할 수 없다는 치명적인 단점이 있다.
그렇다고 CSS Module만 쓰기에는 Styled Components만의 장점이 있기 때문에 어느것을 쓰는게 맞다! 라고는 할 수 없기에 프로젝트 상황에 맞추어서 사용하면 될 것 같다.
참고한 한 블로그 에서는 마크업과 JS를 모두 작성하는 소규모 팀(ex.스타트업) 에서는 Styled Components를 추천하고 있으며, 어느 정도 규모 있고 안정적인 서비스를 구축한다면 CSS Module를 추천하고 있다.
참고 블로그
