학습목표
•
Styled Components를 사용하여 꾸미기 (CSS in JS)
•
Bootstrap을 사용하여 효율적으로 꾸미기
CSS in JS
: style 정의를 CSS 파일이 아닌!! JS로 작성된 컴포넌트에 삽입하는 기법
•
React와 같은 모던 JS 라이브러리가 인기를 얻으면서 등장
◦
컴포넌트 기반 개발 방법
◦
웹페이지를 여러 개의 컴포넌트, 즉 재활용이 가능한 빌딩 블록으로 분리
•
각 컴포넌트에 HTML, CSS, JS를 몽땅 때려 박는 패턴
◦
React는 JSX를 사용해서 JS에 HTML 포함
◦
CSS-in-JS 라이브러리를 사용하여 JS에 CSS도 포함 가능!
▪
styled components, emotion, styled-jsx
Styled Components
사용 방법
•
styled 함수 import 해서 사용
import styled from "styled-components";
import Button from "./Button";
styled.button`
// <button> HTML 엘리먼트에 대한 스타일 정의
`;
styled(Button)`
// <Button> React 컴포넌트에 대한 스타일 정의
`;
JavaScript
복사
•
고정 스타일링
import React from "react";
import styled from "styled-components";
const StyledButton = styled.button`
padding: 6px 12px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
color: gray;
background: white;
`;
function Button({ children }) {
return <StyledButton>{children}</StyledButton>;
}
JavaScript
복사
props 사용하기
: React 컴포넌트에 넘어온 props를 사용하여 가변 스타일링
1.
첫번째 방법
import React from "react";
import styled from "styled-components";
const StyledButton = styled.button`
padding: 6px 12px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
color: ${(props) => props.color || "gray"};
background: ${(props) => props.background || "white"};
`;
function Button({ children, color, background }) {
return (
<StyledButton color={color} background={background}>
{children}
</StyledButton>
);
}
JavaScript
복사
•
JS의 || 연산자를 사용
◦
props가 넘어오지 않은 경우, 기존에 정의한 속성이 유지되도록
2.
두번째 방법
import React from "react";
import styled, { css } from "styled-components";
const StyledButton = styled.button`
padding: 6px 12px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
${(props) =>
props.primary &&
css`
color: white;
background: navy;
border-color: navy;
`}
`;
function Button({ children, ...props }) {
return <StyledButton {...props}>{children}</StyledButton>;
}
JavaScript
복사
•
prop에 따라 바꾸고 싶은 CSS 속성이 여러 개인 경우
◦
css 함수를 사용해서 여러 개의 CSS 속성을 묶어서 정의
•
JS의 && 연산자를 사용
◦
primary prop이 존재하는 경우에만 css로 정의된 스타일링 적용
사용하는 이유
•
자유로운 CSS 커스텀 컴포넌트를 만들 수 있음
◦
React 컴포넌트가 자체 style을 포함하고 쉽게 재사용 가능
◦
평범한 CSS로 만들어져 익숙한 작업 가능
•
모바일 지원
•
style scope
◦
stylesheet에서 특성 요소 / 클래스 스타일을 변경하면 다른 요소에 영향을 미침
→ styled-components는 구성 요소 기반
•
no-class policy
◦
개발자가 컴포넌트의 동작을 제어하기에 용이
◦
props 사용 가능
•
서버 사이드 렌더링
◦
서버에서 앱을 렌더링할 때마다
ServerStyleSheet Context API를 통해 공급자를 생성, 반응 트리에 추가
•
CSS 테스팅
◦
실제 컴포넌트이기 때문에 단위 테스트 수행 가능
◦
Jest로 테스팅 가능
•
Sass, 세련된 지원
추가적으로 배운 것들
useCallback
createGlobalStyle
css 함수 사용하기
&: 와 &::의 차이
코드 리팩토링
CSS vs SASS vs SCSS
css 드래그 방지
css 줄바꿈 기능
참고자료
CSS in JS
Styled Components
추가적으로 배운 것들
