[JS] 배열 데이터 순서가 갑자기 바뀔때는 mutation을 의심해보자

어제오늘 필자를 극한으로 괴롭히던 문제가 있었는데 오늘 동료 개발자와 열띤 논의 끝에 원인을 찾아냈다. 

 

문제

서버로 부터 받아온 배열 데이터의 순서가 렌더링 과정에서 변경되는 문제가 발생했다. 

• 서버로 받아온 데이터

• 렌더링 도중 변경되는 데이터

원인

• 자식 컴포넌트 중에 해당 데이터 배열에 .sort()를 사용한 코드가 있었다.
• 문제의 코드

{data &&
              data
              ?.sort((a, b) => b.exposure - a.exposure)
              .map((el, i) => {
                return (

• .sort()는 mutable 한 매서드로 원본 배열의 순서를 변경한다. 따라서 기존의 데이터 배열 원본을 변경시켰고 이에 따라 같은 배열을 사용하는 다른 컴포넌트에도 영향을 미쳤던 것이었다. 

해결방법

• 문제의 코드를 깊은 복사를 통해 별도의 주소값을 가지는 배열을 만들어 내고 해당 배열을 .sort()하여 문제를 해결하였다. 

  let sorted = [...data].sort((a, b) => b.exposure - a.exposure);