[UI] Image Slider

Image Slider 구현하기

느낀점

1) useState를 이용한 메인 이미지 변경

img의 src가 변경되므로 해당 컴포넌트가 리렌더링 될 필요가 있었다.

2) 요소에 key를 부여하여 react-dom으로 인한 animation 미작동 해결

img의 src를 변경하는 방법을 사용했는데, 이때 react-dom은 img 태그가 삭제되거나 이동된 것이 아니므로 src 속성의 변경을 감지하지 못한다.

이런 경우, react-dom이 해당 요소의 변화를 감지하도록 임의의 key값을 부여하고 src가 변경될 때 key를 변경하면 감지시킬 수 있다.

3) box-sizing을 통해 border를 포함한 명확한 크기를 사용하는 것이 편리하다

border를 제외한 box-sizing은 세부적인 css 설정에서 큰 불편함을 주었다..

코드구경하기

github-ui_practice
codesandbox