강의를 들으며 페이지를 구성할 때 사용할 수 있는 아주 작은 단위의 컴포넌트를 구현해봤다.
여러 SNS에서 프로필 사진을 표시할 때 사용하는 Avatar 컴포넌트이다. 기본적으로 사진을 표시하는 것 이외에도 Image
객체의 onload()
메소드를 사용해서 로딩 시에 추가적인 애니메이션이나 이팩트를 추가하는 방식을 접할 수 있었다.
<input type="range" />
와 동일한 역할을 하는 Slider
컴포넌트이다.
Rail
, 현재 범위를 나타내는 Track
, 사용자와 상호작용하여 범위를 변경할 수 있는 Handle
3개의 컴포넌트로 나누어 각각 구현mousemove
, mousedown
, mouseup
총 3개의 이벤트를 사용mousemove
와 mouseup
의 경우는 좌우로 이동하는 과정에서 Handle의 범위를 이탈 할 수 있어서 전역 이벤트로 지정offsetLeft
와 드래깅 중인 마우스의 x좌표 pageX
를 사용해서 Track
의 길이와 Handle
의 위치를 구한다.Slider
컴포넌트를 storybook으로 테스트하는 중 마우스를 빠르게 움직이는 경우 드래그가 동작하지 않는 문제를 발견했는데 정확한 이유를 찾지 못했다.
<input type="range" />
와 비교하면 추가적인 최적화가 필요하지만 각 컴포넌트의 디자인이 자유로운 것이 유용해보인다.
진행상황을 나타내는 Progress
컴포넌트
width
값에 따라서 로딩바가 길어지는 아주 단순한 구조이다.animation
과 @keyframe
css 속성을 사용크게 복잡하진 않았지만 CSS animation과 관련된 속성들을 알 수 있었다.
[ progress bar에 마우스를 올려보자 ]
네비게이션 바에서 메뉴를 분리할 때 사용하는 컴포넌트. styled component를 사용해서 단순하게 구현할 수 있었다.
< discode의 로딩화면 >
로딩중인 컨탠츠를 더 자세하게 나타낼 수 있는 컴포넌트. 위의 Progress
에서 사용했던 animation을 이용하여 동적인 느낌을 줄수도 있다.
Circle
Box
Paragraph
등 여러 모양의 Skeleton
을 하나의 객체만 import 해서 사용할 수 있다.// 예시
import Skeleton from 'Skeleton'
const App = () => {
return (
<>
<Skeleton.Box />
<Skeleton.Prargraph />
</>
)
}
기존 <select>
태그와 option
태그를 개선한 Select 컴포넌트
<select>
에서 사용할 수 없던 placeholer를 props에 전달해서 설정이 가능하도록 구성했다.
placeholer의 경우 가장 위의 <option>
태그에 placeholer의 값을 넣고 hidden
속성을 적용하면, 가장 위에 있는 값이 노출되지만 클릭시 노출되지 않는다.
강의에서는 <select>
와 <option>
을 styled component로 수정해서 사용했지만 style 적용을 더 다양하게 만들기 위해서 다른 방식으로도 구현할 수 있다.
ul
과 li
태그를 이용해서 간단한 Select를 만든 예시이다.
구조가 더 복잡해질 수 있지만, CSS의 적용이 더 자유롭다.
@keyframes
와 animation
CSSReact.Children
를 사용한 children props 조작