화면을 그리다보면 간혹 오브젝트의 position을 absolute로 주어 표현해야 할 때가 있다. 나또한 이번에 프로젝트를 진행하는 도중 해당 소요가 생겨 TouchableOpacity에 absoult position을 적용하자 터치 이벤트가 동작하지 않는 문제가 발생했다. 다른 페이지를 작업할 때도 TouchableOpacity에 absolute position을 주었었는데, 그때는 문제가 발생하지 않다가 갑자기 생겨난 문제라 적잖이 당황했고 구글링을 시도해봤다.
//문제가 된 컴포넌트
const ChevronBtn = styled.TouchableOpacity`
position: absolute;
height: 100%;
justify-content: center;
align-items: center;
`;구글링 결과 6년전 stack over flow에 같은 증상으로 올라온 질문이 있었는데, 달린 답변 중 하나가 나에게 딱 맞는 해결책이었다. 바로 z-index 속성을 1로 주라는 것이었다. 높은 추천수를 믿고 적용해보자마자 문제가 바로 해결되었다.
const ChevronBtn = styled.TouchableOpacity`
z-index: 1;
position: absolute;
height: 100%;
justify-content: center;
align-items: center;
`;z-index는 오브젝트 사이의 순서를 나타낼 때 사용된다고 한다. z-index가 높으면 앞에, z-index가 낮으면 뒤에 위치하게 된다.
자료 출처:https://velog.io/@nakta/React%EC%97%90%EC%84%9C-z-index-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0
z-index는 오브젝트 사이의 표현상의 상대적인 선후관계를 서술하는 속성인데, 내 경우는 단 하나의 TouchableOpacity만이 있었던 터라 왜 z-index가 이 문제를 해결하는 열쇠가 되는지는 이해하지 못했다. 다만 TouchableOpacity의 터치를 감지하는 내부 로직이 이러한 z-index에 영향을 받도록 구현된것이 아닐까 추측만 하고 있다.
TouchableOpacity에 position absolute를 주면 왜 먹통이 되는지, 항상 먹통이 되는 것도 아니고 특정 상황에서는 왜 정상적으로 작동되는지, 먹통이 되었을 때 z-index를 1로 주었을 때 왜 문제가 해결되는지에 대해서는 추가로 구글링해도 보다 자세한 정보는 안나오는 관계로 나중에 시간이 났을 때 더 깊게 조사해볼 예정이다.
