css trick을 이용한 프로그레스 애니메이션

👻 CSS Tricks! 👻

하나의 Dom Element에서 background 속성을 이용하여 프로그레스 바 애니메이션을 구현하였습니다.

👶 간단한 방식: div 중첩

• 하나의 긴 프로그레스 컴포넌트 안쪽에서 여러 개의 하위 컴포넌트를 결합하여 만들어요.
• 하위 컴포넌트는 isFilled props를 이용해 색칠 여부를 결정해요.
• 하위 컴포넌트를 다시 별도의 div(색칠된)로 구성하여 width를 0% -> 100%로 늘려주면 색이 점점 차오르는 것처럼 표현할 수 있어요.

💡 Background를 이용한 프로그레스바

• 색칠을 위해서 div 상자를 한번 더 포개는 방식은 비효율적일 수 밖에 없어요.
• 특히 리액트에서는 reconcile 단계에서 재귀적으로 컴포넌트를 호출하고, 이전의 스냅샷과 비교하게 되는데, 하나의 돔 요소가 추가된다는 것은 결국 (1) 하나의 리액트 요소를 더 만들어내야 하고, (2) 해당 요소에 변화가 발생했는지 비교해주어야 하므로 비효율적이에요.
  - 이전의 Stack Reconciler 시절에는 vDom(사실 vDom이라는 공식적인 용어는 없어요)을 만들기 위해 재귀적인 탐색(DFS)이 필요했지만 Fiber Reconciler 등장 이후에는 파이버로 구성된 싱글 연결 리스트를 활용해요.

🤔 Background, Background-size, Background-position 을 활용하면 쉽게 구현할 수 있지 않을까?

• 과거 linear-gradient를 활용하여 편지 봉투를 만들어보았던 🔗 CSS 시크릿 이 떠올라 해당 기법을 활용해봤어요.

😎 Depth가 없는 프로그레스 바

• background: linear-gradient(to right, #8f00ff 50%, #e9e7e2 0)
  - 전체 크기의 50% 되는 사이즈로 #8f00ff를 채우고, 나머지는 #e9e7e2로 채웠어요. 0값을 건네서 gradient가 발생하지 않도록 조정했어요.
• background-size: 200% 100%
  - 배경의 크기를 가로로 2배 늘렸어요.
  • 따라서 배경은 프로그레스바 한 칸 크기의 #8f00ff와 한 칸 크기의 #e9e7e2를 가져요.
• background-position: right
  - background-position을 오른쪽에 착 붙게 조정해서 최초에는 오른쪽의 #e9e7e2 배경만 보여요.
• active가 true가 되면 background-position이 left로 변경됩니다. transition을 주었기 때문에 background-position은 점점 왼쪽으로 이동해요.
  왼쪽 50%가 #8f00ff로 가득 차 있기 때문에 #8f00ff 색상이 차오르는 것처럼 보이게 됩니다.

background가 이렇게 좌에서 우로 이동해요.

😎 Depth가 없는 프로그레스 바: 활용

• background-position 값은 분절적인 값이 아니라는 점을 이용해 특정 위치까지 프로그레스 바가 차오르게도 구현할 수 있어요. 🔗background-position

🌞 결론

• linear-gradient를 추가로 활용하여 온전한 형태의 프로그레스바를 구현하였습니다.
• linear-gradient의 색상을 잘 조절하고, animation-direction: alternate, animation-iteration-count 등을 이용하면 화려한 로딩 컴포넌트를 만들 수 있을 것도 같아요.