슬라이드필터(메뉴) 동작 구현

사이트 클론 프로젝트 진행 중 내가 맡은 페이지의 슬라이드 필터를 만들게 되었다. 내가 구현한 방법보다 더 효율적이고 좋은 방법이 있겠지만, 처음 구현해본 방법이기에 기록해둔다.

React에서 구현하려면?

• 특정 요소를 DOM으로 선택하여 구현할 수 없다는 점.
• 슬라이드 메뉴의 다중 사용을 대비하여 별도의 Component로 만든다는 점.
• state 값을 이용하여 필터의 슬라이드 동작은 만든다는 점.
• state 값은 슬라이드 메뉴 Component에 props로 전달한다는 점.
  을 유념하여야 한다.

코드를 살펴보면,

• 부모 component의 state 값으로 filterMoveNum이라는 키값가진 데이터의 value로 1일 설정해둔다.
• filterMoveNum state를 filter Component에 props로 전달하여, filter component에 inline css로 숨김 값을 지정해둔다. (예시의 사례의 경우에는 필터를 브라우저 오른쪽에 숨겨서 나타내야 하므로 translateX를 이용하였다.)
  - filterMoveNum props는 translateX css의 수치를 설정하기 위해 사용하는 값이라고 볼 수 있다.

슬라이드 메뉴를 불러오려면,

• 특정버튼으로 슬라이드메뉴를 불러오는 경우, 해당 버튼에 onClick 이벤트로 슬라이드의 움직임 수치를 결정하는 state인 filterMoveNum 변경해주면 된다.
• 예시의 경우 filterMoveNum에 슬라이드메뉴 크기만큼 값을 주었는데, 슬라이드메뉴 Component에 inline CSS의 translateX의 값이 100 계산되는 점을 염두하였다. (100을 한 이유는 필터의 width크기를 %로 지정하여, 슬라이드메뉴를 메뉴의 크기만큼 슬라이드 하기위해 백분율을 사용한 것이다.)

🙋‍♂️유의사항

• 슬라이드 메뉴에 translate css 설정 시, 브라우저 창 밖으로 밀려서 scroll이 생기지 않도록, 부모 Component 최상위 요소에 overflow: hidden을 설정해둔다.

🤔 Component의 state값을 말그대로 상태가 아닌 무언가를 조정하기 위해서 사용하는 꼼수아닌 꼼수를 이용한 기능구현이었다. 분명 더 효율적이고 깔끔한 코드가 있을 것이다. 멘토님 또는 동기들의 피드백을 받아 개선된 코드를 알게될 경우 덧붙여야 겠다.