transient-components를 이용한 이슈 해결

아래와 같은 화면이 있다고 하자

이 모바일 화면은 웹뷰로 구현되어 있다.

카드의 개수가 많으면 스크롤바가 생긴다.

스크롤바는 스크롤할때만 보이고, 스크롤 하지 않을때는 자연스럽게 사라지게 구현하였다.

 

그런데 스크롤하던 도중에 오른쪽으로 스와이프하면 다른 컬럼에 스크롤바가 남아있는 이슈가 있었다.

scrollvisible=true인 상태가 다른 컬럼에 영향을 준 것이다.

이런경우 styled-compoent에서 아래와 같이 transient props를 만든다.

<S.KanbanColumns

  centeredSlides

  $isScrollVisible={isScrollVisible}>

transient props로 정의하여 넘겨주는 props는 DOM에서 인식하지 않고,

styled-components에서만 사용할 수 있도록 하는 방법이다.

 

그렇기 때문에 DOM에서 감지되지 않아서 다른 컴포넌트에 영향을 주지 않는다.