[styled-components] animation에 props를 줄 때 keyframes에 발생한 문제 해결하기

시간차를 두고 떠오르는 텍스트 애니메이션을 구현하고 있었다.

여러 개의 텍스트 컴포넌트를 하나로 모듈화한 뒤(배열에서 map으로 렌더링) 애니메이션의 delay 시간만 다르게 주기 위해 styled 컴포넌트에 $delay prop을 전달했을 때였다.

대충 해석해보니
'keyframes 선언에 문제 있음 -> styled-components 버전 3에서는 지원되지만 버전 4에서는 지원 안 됨 -> 문자열을 css\\로 감싸면 해결'
이라는 내용이다.

처음에는 에러 메시지의 문자 그대로 animation 어딘가에 \\ 표시를 넣어봤지만 구문이 안 맞았는지 계속 에러가 났다.

하지만 갑자기 'styled-components의 css'가 떠올라서 찾아보니 다음과 같은 내용이 나왔다. (에러 메시지에 있는 그대로 'css helper'라고 치니 나왔다)

css helper는 props 조건에 따른 스타일링 속성을 더 보기 쉽게 작성하기 위한 방법입니다.

props마다 스타일이 다양할 경우 이렇게 하기보다는

const Button = styled.button`
	background-color: ${(props) => (props.secondary ? "black" : "#f8049c")};
	font-size: ${(props) => (props.large ? "1.5em" : "1em")};
	padding: ${(props) => (props.large ? "10px" : "8px")};
	border-radius: ${(props) => (props.large ? "8px" : "4px")};
`;

css helper를 사용해서 props 별로 스타일을 묶어주면 더 보기 편하다.

const Button = styled.button`
	${(props) =>
		props.large
			? css`
					padding: 10px;
					border-radius: 5px;
					font-size: 1.5em;
			  `
			: css`
					padding: 8px;
					border-radius: 4px;
					font-size: 1em;
			  `}
`;

내 경우는 animation이 한 줄이었고 중간에 들어가는 delay 부분만 바꿔주면 되어서 한 줄짜리 props로 될 줄 알았는데 위 에러처럼 뭔가 keyframes에서 에러가 나고 있었다.

css helper를 활용해서 다음처럼 코드를 작성해서 해결했다.

참고로 easeinout 변수는 반복되는 keyframes 내용을 모듈화하기 위해 만든 변수이다.

코드를 줄이기 위해 $delay만 바꿔주는 방식을 css helper와 함께 다시 써 봤는데 css 부분에 'colon expected'라는 구문 에러가 떠서 이 방법은 쓰지 않았다.