Immer [ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer immer를 사용해보자! react는 익히 알다시피 얕은 비교를 통해 상태 관리를 한다. 이 말은 즉 얕은 비교를 하기 때문에 push등의 직접적인 변경을 하게 될 경우 react가 변화를 감지하지 못하여 리렌더링하지 않는다는 것이다. 하지만 전개연산자를 이용해 매번 값을 변경하는것은 꽤 불편한 일이다. 또한 깊이가 깊어질수록 더욱 불편하다. immer의 경우 공식문서를 살펴보면 Immer simplifies han... ReactTILImmerImmer #13.TIL | Immer Immer를 사용하지 않고 불변성 유지하며 업데이트 하기 기존 리액트에서 배열이나 객체를 업데이트 해야 할때는 직접 원본을 수정하면 안되고, 아래와 같이 불변성을 지켜주면서 업데이트를 해주어야 했다. 배열도 마찬가지로 push, splice 등 원본을 바꾸는 메서드가 아닌 concat, filter, map 등 새로운 배열을 반환하는 메서드를 사용하였다. 물론, spread연산자를 활용하여 ... ImmerReactImmer [React] immer을 사용하여 더 쉽게 불변성 유지하기 <리액트를 다루는 기술> 12장 immer을 사용하여 더 쉽게 불변성 유지하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다. 저번 포스트 에서 ...문법과 배열의 내장 함수로 배열을 얕은 복사해서 새로운 값을 덮어쓰는 방법을 썼는데요. (대충 이런식) 만일에 여기서 더 나아가서 객체 안에 배열 안에 객체 안에 배열...같은 구조라면 어떨까요? 이렇게 중... ImmerReactTILImmer [JS] 얕은복사와 깊은복사(feat.리액트에서 깊은복사를...?) 객체가 담겨있는 변수를 다른 변수에 할당하면 데이터 복사가 아닌 참조가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. 동일한 데이터를 바라보고 있는 것이 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때, 깊은 복사를 한다. 각 변수가 참조하는 데이터영역의 주소가 달라지기 때문에 a, b는 서로 다른 데이터가 된다. 하지만, 참조형 ... 깊은복사Immer얕은복사불변성리액트spread operatorState리렌더링Immer
[ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer immer를 사용해보자! react는 익히 알다시피 얕은 비교를 통해 상태 관리를 한다. 이 말은 즉 얕은 비교를 하기 때문에 push등의 직접적인 변경을 하게 될 경우 react가 변화를 감지하지 못하여 리렌더링하지 않는다는 것이다. 하지만 전개연산자를 이용해 매번 값을 변경하는것은 꽤 불편한 일이다. 또한 깊이가 깊어질수록 더욱 불편하다. immer의 경우 공식문서를 살펴보면 Immer simplifies han... ReactTILImmerImmer #13.TIL | Immer Immer를 사용하지 않고 불변성 유지하며 업데이트 하기 기존 리액트에서 배열이나 객체를 업데이트 해야 할때는 직접 원본을 수정하면 안되고, 아래와 같이 불변성을 지켜주면서 업데이트를 해주어야 했다. 배열도 마찬가지로 push, splice 등 원본을 바꾸는 메서드가 아닌 concat, filter, map 등 새로운 배열을 반환하는 메서드를 사용하였다. 물론, spread연산자를 활용하여 ... ImmerReactImmer [React] immer을 사용하여 더 쉽게 불변성 유지하기 <리액트를 다루는 기술> 12장 immer을 사용하여 더 쉽게 불변성 유지하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다. 저번 포스트 에서 ...문법과 배열의 내장 함수로 배열을 얕은 복사해서 새로운 값을 덮어쓰는 방법을 썼는데요. (대충 이런식) 만일에 여기서 더 나아가서 객체 안에 배열 안에 객체 안에 배열...같은 구조라면 어떨까요? 이렇게 중... ImmerReactTILImmer [JS] 얕은복사와 깊은복사(feat.리액트에서 깊은복사를...?) 객체가 담겨있는 변수를 다른 변수에 할당하면 데이터 복사가 아닌 참조가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. 동일한 데이터를 바라보고 있는 것이 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때, 깊은 복사를 한다. 각 변수가 참조하는 데이터영역의 주소가 달라지기 때문에 a, b는 서로 다른 데이터가 된다. 하지만, 참조형 ... 깊은복사Immer얕은복사불변성리액트spread operatorState리렌더링Immer