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 act - immer.js react에서 불변성을 유지하는 코드를 쉽게 작성하게 해주는 라이브러리입니다. 즉, 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 하게 됩니다 state가 얕은 비교를 통해 컴포넌트가 리렌더링 된다는 말은 굉장한 의미가 있습니다. push 전과 다른 값이라고 생각하지만, 리엑트는 state라는 값은 새로운 참조값이 아니기 때문에 이전과 같은 값이라고 인식하고... ReactImmerImmer [React] immer을 사용하여 더 쉽게 불변성 유지하기 <리액트를 다루는 기술> 12장 immer을 사용하여 더 쉽게 불변성 유지하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다. 저번 포스트 에서 ...문법과 배열의 내장 함수로 배열을 얕은 복사해서 새로운 값을 덮어쓰는 방법을 썼는데요. (대충 이런식) 만일에 여기서 더 나아가서 객체 안에 배열 안에 객체 안에 배열...같은 구조라면 어떨까요? 이렇게 중... ImmerReactTILImmer React - (6) useState useState useState 는 Hook 중에 하나이고, useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 클래스형 컴포넌트에서만 사용할 수 있었던 state 를 함수형 컴포넌트에서도 사용할 수 있게 해준다. 카운터 만들기 기본 코드 useState 사용해서 동적값(state) 설정 useState 함수를 사용하기 위해서 모듈을 추가한다. useState 함수를... ReactImmer리액트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 act - immer.js react에서 불변성을 유지하는 코드를 쉽게 작성하게 해주는 라이브러리입니다. 즉, 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 하게 됩니다 state가 얕은 비교를 통해 컴포넌트가 리렌더링 된다는 말은 굉장한 의미가 있습니다. push 전과 다른 값이라고 생각하지만, 리엑트는 state라는 값은 새로운 참조값이 아니기 때문에 이전과 같은 값이라고 인식하고... ReactImmerImmer [React] immer을 사용하여 더 쉽게 불변성 유지하기 <리액트를 다루는 기술> 12장 immer을 사용하여 더 쉽게 불변성 유지하기를 공부하면서 정리한 내용입니다📚 중간에 모르는 것들은 따로 서치를 해서 공부했습니다. 저번 포스트 에서 ...문법과 배열의 내장 함수로 배열을 얕은 복사해서 새로운 값을 덮어쓰는 방법을 썼는데요. (대충 이런식) 만일에 여기서 더 나아가서 객체 안에 배열 안에 객체 안에 배열...같은 구조라면 어떨까요? 이렇게 중... ImmerReactTILImmer React - (6) useState useState useState 는 Hook 중에 하나이고, useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 클래스형 컴포넌트에서만 사용할 수 있었던 state 를 함수형 컴포넌트에서도 사용할 수 있게 해준다. 카운터 만들기 기본 코드 useState 사용해서 동적값(state) 설정 useState 함수를 사용하기 위해서 모듈을 추가한다. useState 함수를... ReactImmer리액트Immer