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