인프런 커뮤니티 질문&답변
작성한 질문수
리액트 메모를 적용했는데 이전에 렌더링 했던 내용을 다시 렌더링 해요
작성
·
269
0
https://github.com/corn1200/rn-chat/blob/master/src/screens/ChannelList.js
React.memo를 코드에 적용했음에도 오류 메세지도 없이 그냥 이전에 렌더링 했던 아이템이 다시 렌더링 되는데 왜 그런지 알 수 있을까요?
답변 1
0
김범준
지식공유자
안녕하세요 김현승님,
김현승님의 깃헙 코드로 테스트해보면 정상적으로 동작하고 있습니다.
아마 출력되는 데이터가 너무 길어서 확인이 어려우실 수 있는데,
기존 <FlatList>에 windowSize={5} 를 추가로 설정하고 테스트를 해보시기 바랍니다.
테스트하는 기기에 따라 렌더링되는 숫자에 차이는 있겠지만,
만약 처음 출력되는 데이터가 0부터 30까지라면,
스크롤을 조금 아래로 움직이면 순서대로 31, 32, 33 이 추가로 출력이 됩니다.
이때, 기존에 출력되었던 0부터 30까지는 다시 출력이 되지 않고,
추가로 해당 숫자들만 출력되는것을 확인 할 수 있습니다.
비교를 위해 Item컴포넌트에서 React.memo를 제거하고 테스트를 해보면,
처음에는 동일하게 0부터 30까지 출력되지만,
스크롤을 움직이면 31이 추가로 출력되는것이 아니라 0부터 31이 출력이 됩니다.
즐거운 하루 되세요
감사합니다.
추가로, ChannelList.js 파일에 3번째 줄에 있는
import Navigation from '../navigations';
코드는 삭제하시기 바랍니다.