글과 댓글이 계속 겹쳐보일때, flex-1을 의심하자
flex-1이 아니라 사실 나를 의심하자..🌀
2025년 4월 17일
배포된 앱에서 댓글과 본문이 겹쳐 보이는 UI 레이아웃 문제가 발생했다.
expo go 환경에서는 해당 현상이 전혀 발생하지 않음development build 및 eas build 환경에서 간헐적으로 발생
당시 고려했던 가능성은 다음과 같다:
expo go 환경에서는 문제가 없었기 때문에 환경 차이일 수 있음본문과 댓글 리스트를 동시에 리패치하면서 비동기 타이밍 차이가 발생했을 가능성2번과 4번을 고려해보았을 때, content 영역의 높이 변화가 의심되어 onLayout을 활용해 실제 렌더링 시 높이를 추적해보았다.
onLayout을 통해 실제 컴포넌트가 렌더된 후의 위치와 크기정보를 확인해보았다. 그랬더니 실제크기(예를 들어 height:355)이 찍히고 height:0 이되어 두개가 찍히는 것을 확인 할 수 있었다.
height:0 가 되었을 때 댓글이 치고 올라와 두 부분이 곂친다고 생각할 수 있었다.
이 문제의 본질은 내가 부모 컨테이너의 높이가 명확하지 않은 상황에서 무분별하게 flex-1을 사용한 것이었다.
flex:1 ? 가능한 공간을 전부 채우는 것
flex: 1은 주어진 공간을 모두 차지하려고 시도하지만, 부모의 높이가 0이면 자신도 height: 0이 된다.
부모의 높이가 정해지지 않은 상태에서 ChallengeContainer 안에 flex-1이 있어,
부모의 높이를 명확하게 잡지못했고, 0이 되어버렸던 것이다.
또한 댓글에서는 내가 댓글 Item 컴포넌트 자체에 flex-1 속성을 부여해서
서로 남는 공간을 사용하려다보니 곂치게 된 문제였다.
즉, 본문 컴포넌트와 댓글 항목 모두에 flex-1을 주어 생긴 문제였다. (expo go 모드에서는 이런 부분을 다 반영하지 않아 오류가 나타나지 않는 것처럼 보인다.)
flex는 flex-grow, flex-shrink, flex-basis를 한번에 나타내는 속성이다.
flex:1 을 풀면 아래와 같다.
점유 크기를 0으로 만든 후 화면 비율에 따라 늘어나거나 줄어들 수 있음을 의미
FlatList는 내부 항목의 높이를 기준으로 가상화 렌더링을 수행한다. 그런데 flex-1이 적용된 항목은 높이가 부모 기준으로 동적으로 바뀌기 때문에, FlatList가 예상하지 못한 방식으로 렌더링하게 된다.
✅ FlatList 내부 항목에는 flex-1을 지양하고, 콘텐츠 기반 렌더링을 유도하는 것이 안정적이다.
초반에 expo go 환경만을 보고 작업했기에, 배포하고 이런 문제가 생긴 것에 대해 원인을 찾기 어려웠다. 그렇다면, 왜 expo go 모드에서는 문제가 생기지 않았던 것일까?
개발용 환경인 expo go는 다음과 같은 특성이 있다:
즉, expo go에서는 문제가 숨겨진 채 정상 작동하는 것처럼 보였던 것이다.
결론적으로 본문과 댓글이 곂쳐서 보이는 문제의 해결 방법은 다음과 같다.
React Native 첫 개발에, flex-1을 이해하지 않고 무작정 쓴 것이 문제였다.
이번 경험을 통해,
🌀 급할수록 돌아가자 🌀