리액트 네이티브에서 setState시 ScrollView가 최상단으로 올라가는 문제 어떻게 해결하나요?

Question

지금 형태가 모달 안에 스크롤뷰가 있고 그 안에 체크박스와 내용들이 있는 형태입니다. <체크박스 onPress={setInfo(newArray),그밖의코드}> {내용} <체크박스 onPress={setInfo(newArray),그밖의코드> {내용} <체크박스 onPress={setInfo(newArray),그밖의코드> {내용} 이런식인데 체크박스에 클릭할때마다 setInfo(newArray) 가 일어나면 스크롤이 가장 위로 올라가서 불편해요. state변경이 리렌더링을 일으키는데 원래는 스크롤까지 초기화시키진 않는걸로아는데.. 문제 해결이 잘 안되네요 조언부탁드립니다.저 modal은 다른 렌더함수에 들어있어서 구조상 useRef같은 훅은 사용할 수 없습니다. 좋은 방법이 있을까요?

HJOW · Accepted Answer

생각보다 간단한 문제가 아닐수도 있습니다.원래 state 바꾼다고 스크롤 위치까지 바뀌는거 아닙니다.근데 바뀌었습니다. 왜 바뀌는지를 생각해봐야 하는데혹시 그 바뀌는 state 값이 화면의 상당 영역에 영향을 주지는 않나요?그러면 어떻게 되냐면일단 영향받는 부분을 다 렌더링을 다시해야 할거잖습니까?렌더링을 하려면, 그전에 지워야 되잖습니까.그 영역 넓이가 넓으면, 화면 전체 크기가 줄어드니까스크롤 위치가 더이상 그위치에 있을수가 없게 되죠.그 상태에서 다시 렌더링이 되서화면크기가 다시 늘어납니다.스크롤 위치는 자동으로 원상복구되지는 않겠죠.사람 입장에서는 스크롤이 위로 올라간것처럼 느껴지겠죠.이런 문제가 발생한다면state 변경 전 스크롤 위치값 변수에다 담아뒀다가state 콜백함수에서 다시 스크롤 위치를 돌려놓는 수가 있겠죠setState 함수 (함수형 컴포넌트 쓰시면 변수이름에 따라 함수명은 달라지겠지만 어쨌든 뭔함수인지는 알겠죠?) 콜백 넣을 수 있는 건 아시죠?

리액트 네이티브에서 setState시 ScrollView가 최상단으로 올라가는 문제 어떻게 해결하나요?

1개의 답변

Q&A 목록