[React] Create 기능 구현 - immutable

Study. React

Create 기능 구현

[create 기능 구현: immutable]

 

📌immutable: 불변성, 원본을 바꾸지 않는다

 

📌React 컴포넌트의 state를 변경해야 할 땐, 꼭 setState를 사용해야 하며, 그 과정에서 기존 객체의 값을 직접적으로 수정해서는 안된다.

📌부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들 또한 리렌더링되는 것은 React의 기본 속성

📌코드상에서 불변함을 유지하여 원본을 바꾸지 않는다면 최적화할 때 아주 쉽게 할 수 있음

 

📌그러나 기존의 객체를 건들이지 않고 새 객체를 생성하여 불변함을 유지하면서 값 업데이트를 해야하는 경우, 코드를 작성하다보면 가끔씩 복잡해질 때가 있음. 

이 작업을 쉽게 해줄 수 있는 것이 Immutable.js

 

📌Immutable.js 사용시 규칙

1) 객체는 Map

2) 배열은 List

3) 설정할 땐 set

4) 읽을 땐 get

5) 읽은 다음에 설정할 땐 update

6) 내부에 있는 것을 작업할 땐 ln을 붙인다. ex) setln, getln, updateln, . . . 

7) 일반 Javascript 객체로 변환할 땐 toJS

8) List엔 배열 내장함수와 비슷한 함수들이 있음 => push, slice, filter, sort, concat 등은 전부 불변함을 유지

9) 특정 key를 지울때나 List에서 원소를 지울 때 delete사용

 

📎참고1: https://opentutorials.org/module/4058/24860

📎참고2: https://velopert.com/3486