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

Question

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

엄홍재 · Answer

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 해주는 것을 사용해도 좋을 것 같습니다