[#459] Fix: 너무 많은 클래스가 생기는 현상 방지

styled-componenet prop이 아주 빠르게 변하면서 200개 이상의 클래스가 생성됐다는 경고가 생겼습니다. 해당 경고문에서 권장하는 방법대로 수정하였습니다.
titicacadev · Feb 6, 2020 · 3d0b955 · 3d0b955
1 parent 9adadc8
commit 3d0b955
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/slider/src/handle.tsx b/packages/slider/src/handle.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
 import styled, { StyledComponentProps } from 'styled-components'
 
-const HandleContainer = styled.div<{ percent: number }>`
+const HandleContainer = styled.div.attrs<{ percent: number }>(
+  ({ percent }) => ({
+    style: {
+      left: `${percent}%`,
+    },
+  }),
+)`
   position: absolute;
   box-sizing: border-box;
-  left: ${({ percent }) => percent}%;
   width: 70px;
   height: 90px;
   transform: translate(-50%, -50%);

diff --git a/packages/slider/src/track.tsx b/packages/slider/src/track.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
 import styled, { StyledComponentProps } from 'styled-components'
 
-export const TrackContainer = styled.div<{ left: number; right: number }>`
+export const TrackContainer = styled.div.attrs<{ left: number; right: number }>(
+  ({ left, right }) => ({
+    style: {
+      left: `${left}%`,
+      right: `${100 - right}%`,
+    },
+  }),
+)`
   position: absolute;
-  left: ${({ left }) => left}%;
-  right: ${({ right }) => 100 - right}%;
   padding: 20px 0;
   margin-top: -20px;
 `