Infinite Scroll 문제

Question

안녕하세요 강사님 강의 잘 보고있습니다. 가장 최초 게시물 페이지에 진입하면 오류가 뜨지 않는데 다른 페이지로 들어갔다가 PostCardList 페이지로 들어가면 다음과 같은 오류가 발생하면서 기존에 있었던 게시물들이 반복해서 뜨는데요ㅠㅠ 어느 부분이 문제일까요?ㅠㅠ https://github.com/HyunYuJin/me_blog 제 깃 주소도 올려드려요!!ㅠㅠ 감사합니당

현유진 · Answer

바쁘신 와중에 친절한 설명 감사드립니다😭 강사님 설명따라 가다보니까 제가 PostCardList에 해당하는 부분을 별도의 페이지를 분리 해놔서 나갔다가 또 그 페이지에 들어갔을 때 POST_LOADING_REQUEST를 또 해서 same key 문제가 나타나는거 같더라구요ㅠㅠ 그래서 제 생각에는 다른 페이지로 이동할 때 posts:[]로 날리는 방법이 제일 간단할거 같은데 가능할까요?? 가능하다면 이런 경우는 어떻게 처리해줘야 할까요??ㅠㅠ

싸플 · Answer

간단하게 생각해보시면 됩니다.  1) 화면 첫페이지 갔을때 이미 PostCardList를 불러와 store에 저장해놓았죠.  2) 카드 중 한개를 클릭해서 세부적으로 들어갔다가 뒤로가기하면 다시POSTS_LOADING_REQUEST를 불러오는 request를 날리게 됩니다.  그럼 1)과 2) 합쳐서 총 중복된(2개) PostCardList가 생겼습니다. 그럼 안생기게 할려면 어떻게 해야할까요?  제일 간단한 방법은 1) 과 2) 사이 -> 즉, POST_DETAIL_LOADING_REQUEST할때 posts:[] 를 이렇게 하여 날려보내면 됩니다. ********************************************************************************** same key 문제는 대부분 map으로 배열을 다시 만들어 그릴때 발생합니다. 즉 map을 그릴때 최상단쪽에 key값을 넣어주어야 하는데...  1) key 값을 안넣어주거나 2) 최상단이 아닌 바로 그 아래에...(key값을 넣었다고 생각했는데도 에러가 발생하는 경우 대부분)      값을 넣어서 에러가 발생합니다. (코드 작성시 순간 헷가리거나 발생합니다) (요약) same key 문제는 크게 1) Reducer에서 중복되어서 문제가 발생하거나 2) 배열을 map 이용하여 렌더링시 key값 위치를 착오로 잘 못 넣어서 발생합니다.  ->  이 두부분 위주로 중점적으로 파악해보시면 에러를 잡으실수 있으실 것입니다

현유진 · Answer

앗 왜 오류가 발생했는지는 이해했어요! 근데 해결을 잘 못하겠어서 그런데 혹시 어느 부분을 수정해야하는지 힌트 같은거 주실 수 있을까요?ㅠㅠ 제가 아직 React가 많이 미숙해서요ㅠㅠ 부탁드립니당ㅠㅠㅠ

싸플 · Answer

해당 오류는 reducer에서 이미 불러온 것을 다른 곳 갔다 다시 왔을때 또 불러와서 발생하는 오류입니다. 그래서 'two children with same key'라고 나오는 것입니다.  현재 오류 해결하신거 같은데 맞나요? 잘 만드셨네요. ^^