[React] reverse() 함수 관련 크로스 브라우징 이슈

상위 컴포넌트에서 props로 배열을 받아 와 배열 요소를 뒤집어서 뿌려줘야하는 상황에서 크로스 브라우징 이슈가 발생했다.

 

API에서 받아온 원본 배열의 무결성을 지키기 위해 하위 컴포넌트 내부에서 

 const copiedArr = [
    ...apiArr,
  ].reverse();

 

위와 같이 얕은 복사를 해주었다.

 

chrome 환경에서는 reverse가 된 배열이 렌더되었지만, safari 환경에서는 reverse된 배열이 렌더되지 않았다.

 

디버깅 결과 copiedArr에 reverse된 데이터가 아닌 apiArr의 데이터가 있는 것을 확인하였고, 브라우저간의 렌더 과정에서 변수에 값을 할당하는 시점에 차이가 있을 것이라고 추측했다.

 

dependancy를 걸어 apiArr의  값이 변할 경우 다시 얕은 복사를 통해

  const copiedArr = useMemo(() => {
    return [...apiArr].reverse();
  }, [apiArr]);

위와 같이 reverse된 데이터를 할당해주었고,

 

이를 통해 크로스 브라우징 이슈를 해결할 수 있었다.