본문 바로가기

mutable2

[JS] 배열 데이터 순서가 갑자기 바뀔때는 mutation을 의심해보자 어제오늘 필자를 극한으로 괴롭히던 문제가 있었는데 오늘 동료 개발자와 열띤 논의 끝에 원인을 찾아냈다. 문제 서버로 부터 받아온 배열 데이터의 순서가 렌더링 과정에서 변경되는 문제가 발생했다. 서버로 받아온 데이터 렌더링 도중 변경되는 데이터 원인 자식 컴포넌트 중에 해당 데이터 배열에 .sort()를 사용한 코드가 있었다. 문제의 코드 {data && data ?.sort((a, b) => b.exposure - a.exposure) .map((el, i) => { return ( .sort()는 mutable 한 매서드로 원본 배열의 순서를 변경한다. 따라서 기존의 데이터 배열 원본을 변경시켰고 이에 따라 같은 배열을 사용하는 다른 컴포넌트에도 영향을 미쳤던 것이었다. 해결방법 문제의 코드를 깊은 복.. 2022. 9. 6.
[JS] 자바스크립트에서 불변성을 이용하는 경우 The case for Immutability in JavaScript 불변성 데이터 구조의 이점과 사용법 불변성은 아무것도 변하지 않는 불변의 상태를 뜻하고 이러한 의미를 우리는 코딩에서 변하지 않는 데이터 구조의 개념으로 이용하고 있다. 어떻게 이런 게 가능하며 왜 불변성을 이용하는 것일까? 이는 아주 좋은 질문이며 이번 포스팅에서 다룰 주제이다. 이 글이 끝날 때쯤 언제 불변성을 이용하고 언제 이용하지 말아야 하는지 이해할 수 있기를 바란다. 우선, 불변성 데이터 구조란 정확히 무엇일까? 위에서 언급했듯, 이는 절대 변하지 않는 구조이다. 설사 변하는 것 처럼 느껴진대도 내부적으로 새로운 구조가 만들어진다. 자바스크립트에서 한가지 좋은 예는 스트링 데이터 타입이 있다. 스트링은 불변성을 가진다. 예.. 2022. 5. 31.