해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.
Make Your Apps Look Good
스타일링은 컴포넌트를 구축하는데에 있어서 중요하다.
특정 컴포넌트의 스타일에 영향 받지 않도록 다른 컴포넌트를 스타일링 하는 방법등의 다양한 기술들이 있다.
// 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>
);
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;
}
}
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를 추천하고 있다.
참고 블로그