참고
컴포넌트 스타일링
NOTE
CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일이 지정된 컴포넌트를 생성하여, Tag쓰듯 스타일 컴포넌트를 쓰는것을 말한다
•
즉 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하게 한다
•
전역에서 중첩 사용되지 않게(컴포넌트 자체에서만 적용) 만들어준다
바닐라 & 인라인 CSS
NOTE
/* App.css */
.myComponent {
color: blue;
font-size: 20px;
}
import './App.css';
function App() {
return <div className="myComponent">안녕하세요, React!</div>;
}
JavaScript
복사
바닐라 CSS
•
장점
◦
쉬운 사용: 기존 CSS를 작성하는 방식과 동일하다.
◦
글로벌 스타일링: 하나의 CSS파일에서 여러 컴포넌트의 스타일을 관리가능
•
단점
◦
네임스페이스 충돌: 다른 컴포넌트의 같은 클래스에도 적용된다.
◦
범위조정 어려움: 글로벌하게 적용되므로 컴포넌트 스타일링을 격리하기 힘들다.
<p
style={{ fontSize: "1.5rem" }}>
A community of artists and art-lovers.
</p>
<input style={{ borderColor: emailNotValid ? "red" : undefined }}/> // 동적 인라인
JavaScript
복사
인라인 스타일
•
장점
◦
쉽게 추가할 수 있고, 인라인은 확실히 해당 요소의 범위에만 적용된다.
•
단점
◦
모든 요소를 개별적으로 스타일링 해야한다. (모둘화가 어려움)
CSS 모듈
NOTE
CSS 모듈은 CSS를 모듈화 하여 사용하는 방식으로, CSS 클래스의 이름이 고유하게 변환되어 글로벌 스코프 문제를 해결할 수 있다!
import logo from "../assets/logo.png";
import classes from "./Header.module.css";
export default function Header() {
return (
<header>
<img src={logo} alt="A canvas" />
<h1>ReactArt</h1>
<p className={classes.paragraph}>
{" "}
A community of artists and art-lovers.
</p>
</header>
);
}
JavaScript
복사
•
기본적인 자바스크립트 도구는 아니며, React에서 빌드된다.
•
기본 CSS와 달리, import ~ from으로 가져오며, 실제 빌드 시에는 임의의 클래스 이름으로 적용된다.
styled-components
NOTE
import { styled } from "styled-components";
const Input = styled.input`
width: 100%;
padding: 0.75rem 1rem;
line-height: 1.5;
background-color: ${(props) => (props.invalid ? "#fed2d2" : "#d1d5db")};
color: ${(props) => (props.invalid ? "#ef4444" : "#374151")};
border: 1px solid ${(props) => (props.invalid ? "#f73f3f" : "transparent")};
border-radius: 0.25rem;
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
`;
const Label = styled.label`
display: block;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: ${(props) => (props.invalid ? "#f87171" : "#6b7280")};
`;
export default function CustomInput({ label, invalid, ...props }) {
return (
<p>
<Label $invalid={invalid}>{label}</Label>
<Input $invalid={invalid} {...props} />
</p>
);
}
JavaScript
복사
``(백틱)으로 감싸서 사용하는 방식
스타일 컴포넌트의 경우, ``으로 내부에 스타일을 모두 정의한다.
invalid앞에 $를 붙이는 이유는 기본적 내장속성과 충돌이 나지 않게하기 위함이다.
•
invalid는 기본 내장속성에도 존재하기 때문에 예외가 발생한다. $를 붙여서 회피
tailwind
NOTE
<header className="flex flex-col items-center mt-8 mb-16">
<img
src={logo}
alt="A canvas"
className="mb-8 w-44 h-44 object-contain"
/>
<h1 className="text-4xl font-semibold tracking-widest text-center uppercase text-amber-800 font-title">
ReactArt
</h1>
<p className="text-stone-500">A community of artists and art-lovers.</p>
</header>
JavaScript
복사
css보다 편리한 css적용도구?, css보다는 좋은거같다.
•
장점
◦
CSS몰라도 간편하게 사용이된다?
◦
익숙해지면 클래스 추가로 편리하게 작성한다?
•
단점
◦
익숙해질떄까지 외워야한다