✍️ 초기 과정

• 슬라이드를 직접 구현하면서 항상 움직이는 크기값을 state 담아 관리해서 클릭할 때마다 리렌더링이 됐다.
• 반응형을 구현하기 위해 state 를 resize 이벤트 가 호출될 때마다 상태를 변경시켜 불필요한 렌더링이 발생했다.
• 이벤트 함수는 발생할 때마다 호출되기 때문에 state 변경이 아닌 변수와 css 속성을 활용했다.

🤜 구현 과정

✅ 변수를 활용하자

• SlideBox : 슬라이드를 감싸고 있는 엘리먼트
• activeIdx : 현재 슬라이드의 인덱스 값
• 클릭한 이벤트 함수를 통해 슬라이드 인덱스 값을 증감시킨다.

✅ 속성을 이용하자

• 클릭 이벤트 함수가 호출될 때마다 엘리먼트의 style 속성과 activeIdx 를 이용해 css 변경한다.
• transform : translate3d 또는 translateX 에서 (슬라이드 박스 width 값 * activeIdx,0,0) 또는 (슬라이드 박스 width 값 * activeIdx) 을 적용한다.
• min-width : flex 를 이용할 경우 내부 요소의 크기가 부모 요소의 width 값에 맞게 자동으로 나뉘어 작아지기 때문에 슬라이드 리스트에 100% 를 적용하여 크기를 유지한다.

⛔️ 리렌더링을 주의하자

• 반응형을 구현하기 위해 resize 이벤트를 통해 state 값을 변경시킬 경우 이벤트가 발생할 때마다 state 가 변경돼 엄청난 리렌더링이 일어난다.
• 모든 과정은 이벤트 함수와 css 를 통해 해결할 수 있었고 state 가 꼭 필요한 경우인지 다시 생각해볼 수 있었다.

🖐 구현 결과