React 리액트 State 배열 합치기 문제

Question

안녕하세요. 리액트 공부를 목적으로 리그오브레전드 전적사이트를 만들고 있는 학생입니다.다름이 아니고 제가 전적사이트에서 사용자 이름을 검색하면 우선 10개의 전적이 뜨고,그다음에 스크롤을 최하단으로 내리면 추가로 10개의 전적이 추가적으로 렌더되게 하려고 했는데요.10개의 전적이 추가적으로 생기는게 아니고, 그냥 새로운 10개의 전적이 렌더되어 버립니다.(10개의 전적 -> 로딩후 20개 가 아니고, 10개의 전적 -> 로딩 후 새로운 10개의 전적 이 되어버림..) 최초로 전적을 불러오는 코드 axios.get(url, { params : { beginIndex: index.current, endIndex: index.current+10 } }) .then(({ data }) => { index.current += 10; console.log("index :", index.current); setLoading(true); setMatchList([...data.matches]); const url = 'http://ddragon.leagueoflegends.com/cdn/10.23.1/data/en_US/champion.json'; axios.get(url).then(({data}) => { for(let idx in data.data) { const value = String(data.data[idx].key); setChampions((state) => { return { ...state, [value] : idx }; }); } }); }); 최하단으로 스크롤하면 추가적인 전적 10개를 불러오는 코드axios.get(url, { params : { beginIndex: index.current, endIndex: index.current+10 } }) .then(({ data }) => { index.current += 10; setLoading(true); console.log(matchList.length, data.matches.length); setMatchList([...matchList, ...data.matches]); scrolling.current = false; }); 전적을 뿌려주는 코드

{matchList.map(_element => { return(

) })}

setMatchList([...matchList, ...data.matches]) 도 시도해보고,setMatchList(matchList.concat(data.matches)) 도 시도해보았는데 둘 다 새로운 전적으로 덮어씌워져 버립니다.뭐가 문제일까요?공부하는 입장이라 코드가 많이 더러워서 다 올리진 못했습니다!!도와주세요!!

띡띱띹 · Accepted Answer

10개 추가로 받아올 때 setMatchList(prevList &#61;> [...prevList, ...data.matches]) 해보시겠어요?

마라토집착 · Answer

matchList[ ] 배열을 새로 만드세요. immutable 하게 파라미터를 넘거야 합니다.10개 조회후 배열에는 10개 요소가 담김, 다음이벤트에는 이 배열을 새로 만드는겁니다 자바로는 new 키워드 처럼 배열 복사 &#43; 신규10개요소 추가로 총 20개요소로 만들어 지는지 디버깅 해보세요 .[최하단 스크롤이벤트시 해야할일]신규10개요소는 추가분이고, 서버에서 json 형태로 가져와서 기존배열에 추가하는 형태로 새 배열만들어 세팅요이게 immutable 디자인패턴입니다. 리액트 기본사상중 하나 ~

카시와기유키 · Answer

hooks 를 쓰시나요? 만약 그렇다면 matchList 라는 state 가 바뀔 때마다 첫 번째 파라미터로서의 익명함수가 새롭게 생성되도록, 두 번째 파라미터로서의 배열에 matchList 를 넣어야 합니다. 넣지 않았기 때문에 matchList 는 초기 렌더링 때부터 그대로 null 이 됩니다.만약 넣어서 무한 리렌더링이 일어난다면 잘못된 설계고요. 저도 시행착오를 겪은 것이네요. 위의 방법이 헷갈리거나 재설계가 어렵다면, 단순히 axios 외부 함수의 파라미터에 matchList 를 추가해서 사용하면 됩니다. 그리고 가능하시다면 infinite-scroll 에다가 react-virtualized 라이브러리도 같이 넣어보세요.

혹등혹등 · Answer

다들 감사드립니다. 단순하게 띡띱띹님이 알려주신 코드대로 하면 정상적으로 작동하네요.그런데 전 제가 한것이 왜 잘못되었는지 이해가 아직은 가질 않습니다 ㅜㅜ공부가 더 필요하겠네요.. 감사합니다!!

LostStarz · Answer

최하단으로 스크롤 했을 때axios.get 한번 호출되는게 맞나요?

혹등혹등 · Answer

LostStarz // 플래그 변수 사용하는 식으로 해서최하단으로 스크롤하면 scrolling &#61; true 로 바꾼다음에axios.get 호출하고, 다 수행한 후에 다시 scrolling &#61; false 로 바꾼식으로 아래와 같이 코딩했습니다! const scrollHandler &#61; (event) &#61;> { let scrollHeight &#61; Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); let scrollTop &#61; Math.max(document.documentElement.scrollTop, document.body.scrollTop); let clientHeight &#61; document.documentElement.clientHeight; if(scrollTop &#43; clientHeight &#61;&#61;&#61; scrollHeight) { if(!scrolling.current) { scrolling.current &#61; !scrolling.current; loadMatchList(accountId, index, () &#61;> { scrolling.current &#61; !scrolling.current; }); } } }

React 리액트 State 배열 합치기 문제

6개의 답변

#concat 목록