[Dev Log] UI : Experimental 터치슬라이더 구현하기 #4 ❗️ISSUE❗️

## 숨은 문제점들
- 얼핏 보면 터치 슬라이딩 구현이 끝난거같아보이지만 아직 해결해야할 문제가 있다.
- 게시글의 상세정보가 담기는 우측 공간은 리덕스 persist에 의해 새로고침해도 지속적으로 띄워져 있다.
- 게시글을 클릭하면 서버에서 해당게시글의 전체 정보를 받아오는데 이 정보를 리덕스 store에 담고 그것을 리액트에서 처리한다.
- 이 과정이 전부 리덕스 persist로 이루어진다.(왜 이렇게 해놓은건지는 잘 모르겠지만)
- 그렇다보니 다른 게시글을 클릭했을 때 컴포넌트가 리렌더링 되지않고, 그로 인해 이미지 인덱스, translate값 등이 그대로 유지된다.
- 이 문제는 터치 슬라이드에서만의 문제가 아니다. 게시글을 삭제하더라고 별도 처리를 해주지않으면 우측에 그대로 게시글이 남아있는것 처럼 보이거나 로그아웃을 하고 다시 접속해도 해당게시글이 미리 선택되있는 등의 문제가 있다.

https://user-images.githubusercontent.com/84060219/149631835-38508cd9-5a4b-4367-9379-7c2649b59fa3.mov

## 방법1: useEffect 써보기

- 심지어 슬라이딩 구현에 필요한 값들을 uesState가 아닌 useRef으로 가지고 있어서 값이 변화한다고 리렌더링 되지않는다. (만약 값변화에따라 리렌더링 되면 재앙이겠지만)
- 아무튼 컴포넌트는 유지가되고 리덕스상태만 변화하기 때문에 리덕스 상태변화를 감지해서 변수들의 값을 초기 상태로 돌려보기로 했다.

```jsx
useEffect(() => {
currentIdx.current = 0
isDragging.current = false
startPos.current = 0
animationId.current = 0
prevTranslateValue.current = 0
currentTranslateValue.current = 0
pictureWrapperRef.current.style.transform = 'translateX(0)'
}, [id])
```
- useEffect의 dependences에 넣어준 id는 리덕스상태로 받아오는 게시물의 고유id값이다. 게시물 클릭시 변화하기때문에 적절한 deps라고 생각함.
- 이렇게 쉽게 해결된다면 좋겠지만 역시나 이상한 현상이 발견됨.
- 글에는 쓰지 않았지만 게시글들은 슬라이딩 애니메이션 효과를 위한 transition : 0.3s를 가지고 있기 때문에 useEffect로 translate를 0으로 만드는 과정에서 슬라이딩이 되는 모습을 봐버리게된다.

https://user-images.githubusercontent.com/84060219/149632293-e4ce0531-b9af-4105-a913-0da001187083.mov

## 방법2: Loading Indicator 써보기

- 다음으로 떠오른 방법은 로딩 인디케이터를 사용하는 것이다.
- 컴포넌트가 안바뀐다면 매우 미세한 시간동안 다른 컴포넌트를 올렸다 빼면 되지 않을까. 심지어 로딩인디케이터는 필수이니
- 로딩인디케이터도 직접 전부 만들고싶었지만 머리가 너무 복잡해진 상태여서 인터넷에서 간단한 예제를 찾아서 조금 수정후 사용해봤다.
[로딩인디케이터 참조 - css-tricks](https://css-tricks.com/making-css-animations-feel-natural/)

https://user-images.githubusercontent.com/84060219/149632518-cc0de5c1-784b-4b3d-8e33-e58a8dfcc037.mov

- 급하게 만든 티가 난다..
- 어차피 로딩인티케이터는 게시물을 클릭했을 떄 서버에서 정보를 받아어기 전까지 보여줘야하고 그것을 동일한 사이즈의 별도의 컴포넌트로 만들었다. 그럼 컴포넌트가 바뀌기 때문에 useRef의 값들도 자동으로 초기화되고 애니메이션효과가 발생하지 않는다.

https://user-images.githubusercontent.com/84060219/149632622-e2b003fb-d5fa-4d51-8e6c-daa4802f3505.mov

- 아쉬운 점이라면 로딩인디케이터가 엄청빨리 지나가기때문에 디바이스의 상태에따라 화면이 깜빡인다는 느낌을 받는다.