개발자

React에서 데이터 정렬 (ordering)하기

2022년 11월 02일조회 637

예시코드 첨부했습니다. 데이터를 원하는 key에 따라 정렬 하려고 합니다. 버튼을 누르면 원하는 값으로 데이터를 보려고 하는데 문제는 정렬을 잘 했는데 데이터가 변하지를 않습니다. sort 메서드를 잘못 사용했나 싶어. console.log(data) 로 디버깅 해보면 data는 변화하는데 화면은 변하질 않아요. 오류를 찾아주세요.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

엄홍재님의 프로필 사진

data.sort(orderByName) 을 통해 정렬되어 나온 array는 사실 변화한 것이 아닙니다. 쉽게 설명하면 기존의 data에 있는 array라는 껍데기는 그대로 있고 안에 있는 요소가 변화한 것입니다. 그래서 state가 변하지 않았다고 판단하고 이는 re-render가 발생하지 않습니다. - sort와 관련된 문서 입니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array 이를 해결하려면 새로운 배열로 만들어 주어야합니다. 가장 간단한 방법은 spread 연산자를 이용해서 setData([...data.sort(orderByName)]) 이렇게 사용하면 될 것 같습니다. 추가적으로 lodash나 다른 라이브러리들을 이용해서 정렬했을 때 결과값을 새로운 배열로 return 해주는 것을 사용해도 좋을 것 같습니다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!