벨로퍼트와 함께하는 모던 리액트 · GitBook
2장. 리액트 컴포넌트 스타일링하기
2-3. styled-components
https://react.vlpt.us/styling/03-styled-components.html
CSS in JS : 자바스크립트 안에 css를 작성하는 것
styled components : 그 중 가장 인기 있는 라이브러리
그 외에 emotion, styled jsx, jss 등
yarn add styled-components
마켓플레이스에서 vscode-styled-components 설치
백틱을 사용하는 문법
const message = `hello ${name}`;
백틱을 함수처럼 사용하는 문법
괄호 대신에 백틱으로 감싸주는 식으로 사용한다는 점이 흥미롭다.
const name = "레옹";
function send(staticText, ...data) {
console.log(staticText);
console.log(data);
}
send`내 이름은 ${name}이야`;
결과
// ['내 이름은 ', '이야']
// ['레옹']
send(`내 이름은 ${name}이야`);
결과
// '내 이름은 레옹이야'
import styled from "styled-components";
styled.button`
/* css */
`;
styled(Button)`
/* css */
`;
다양한 스타일 유틸 함수 라이브러리
https://polished.js.org/
import { darken, lighten } from 'polished';
&:hover {
background: ${lighten(0.1, selected)};
}
내부 컴포넌트에 스타일을 전달하는 방법
https://styled-components.com/docs/api#themeprovider
import styled, { ThemeProvider } from 'styled-components';
const palette = {
blue: '#228be6',
gray: '#496057',
pink: '#f06595'
};
function App() {
return (
<ThemeProvider theme={{palette}}>
<Button></Button>
</ThemeProvider>
)
}
...
background: ${props => props.theme.palette.blue};
@keyframes 규칙은 특정 지점들을 키프레임으로 설정함으로써 CSS 애니메이션 제어.
import styled, { keyframes } from 'styled-components';
@keyframes 이름 {
from {
width: 300%;
}
to {
width: 100%;
}
}
위처럼 from ~ to를 사용하거나
@keyframes 이름 {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
위처럼 %로 타임라인을 직접 설정할 수 있음
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes
1.
useState
사라지는 효과를 구현하려면 Dialog 컴포넌트에서 두개의 로컬 상태를 관리해야 함
1)animate
: 현재 트랜지션 효과를 보여주고 있는 중이라는 상태
2)localVisible
: 실제로 컴포넌트가 사라지는 시점을 지연시키기 위한 값
2.
useEffect
:visible
값이 true 에서 false 로 바뀌는 시점을 감지하여animate
값을 true 로, setTimeout 함수를 사용하여 필요한 시간 이후 false로
* localVisible
이 없으면 컴포넌트가 처음 나타났을 때부터 실행됨, 전환되는 시점만 캐치해서 하기 위해서 필요
function Dialog({ title, content, children, confirmText, cancelText, visible, onConfirm, onCancel}) {
const [animate, setAnimate] = useState(false);
const [localVisible, setLocalVisible] = useState(visible);
useEffect(() => {
if(localVisible && !visible) {
setAnimate(true);
setTimeout(() => setAnimate(false), 250)
}
setLocalVisible(visible);
}, [localVisible, visible]);
if(!localVisible && !animate) return null;
return (
<DarkBackground dissapear={!visible}>
<DialogBlock dissapear={!visible}>
...생략...
코드에 문제가 있나 싶었다가 테스트를 해보니 특정하게 문제가 있었는데, 찾아보니 역시 버전 이슈가 있었다.
스타일링의 마지막인 styled-components를 경험해보면서 신기했지만 참 힘겨웠다. 뭐랄까 굳이 잘 정리된 체계를 무너뜨리며 하나에 담아야 하나.. 만약 CSS를 분업해서 담당하는 디자이너나 개발자가 따로 있다면 더더욱 안좋을 것 같다.
실제로 찾아보니 개발 효율성이나 컴포넌트 위주라면 CSS in JS
방식이 좋고, 그렇지 않다면 CSS in CSS
를 유지하는 것이 좋다고 한다.