React(17) Immutable 개념

리액트 컴포넌트의 state 를 변경시, 무조건, setState 를 통해서 업데이트 해주어야 하며,

업데이트 과정에서 기존 객체의 값을 직접적으로 수정하면 절대!! 안됩니다.

언제나 기존객체는 불변함을 유지시켜주어야 합니다. 자칫 잘못했다 나중에 최적화를 제대로 못하게 되는 일이 발생하죠.

 

"데이터를 이리저리 주고받는 과정에서 데이터는 변하면 안된다.

예를 들어 데이터를 추가할 때 push()는 데이터뭉텅이(배열) 원본으로, concat()은 복사본으로 작업한다.

→ 그래서 원본이라는겨 복사본이라는겨? 굉장히 헷갈리며 일관성이 떨어짐

이때 Immutable 라이브러리를 사용하면 원본은 킵하면서 복제본의 결과만 일관성있게 바꿔준다."

 

Immutable 을 사용 할 때는 다음 규칙들을 기억하세요:

1. 객체는 Map

2. 배열은 List

3. 설정할땐 set

4. 읽을땐 get

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

6. 내부에 있는걸 ~ 할땐 뒤에 In 을 붙인다: setIn, getIn, updateIn

7. 일반 자바스크립트 객체로 변환 할 땐 toJS

8. List 엔 배열 내장함수와 비슷한 함수들이 있다 – push, slice, filter, sort, concat… 전부 불변함을 유지함

9. 특정 key 를 지울때 (혹은 List 에서 원소를 지울 때) delete 사용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

import React from 'react'; import { render } from 'react-dom'; import App from './App'; import { Map, List } from 'immutable';   // 1. 객체는 Map const obj = Map({   foo: 1,   inner: Map({     bar: 10   }) });   console.log(obj.toJS());   // 2. 배열은 List const arr = List([   Map({ foo: 1 }),   Map({ bar: 2 }), ]);   console.log(arr.toJS());   // 3. 설정할땐 set let nextObj = obj.set('foo', 5); console.log(nextObj.toJS()); console.log(nextObj !== obj); // true   // 4. 값을 읽을땐 get console.log(obj.get('foo')); console.log(arr.get(0)); // List 에는 index 를 설정하여 읽음   // 5. 읽은다음에 설정 할 때는 update // 두번째 파라미터로는 updater 함수가 들어감  nextObj = nextObj.update('foo', value => value + 1); console.log(nextObj.toJS());   // 6. 내부에 있는걸 ~ 할땐 In 을 붙인다 nextObj = obj.setIn(['inner', 'bar'], 20); console.log(nextObj.getIn(['inner', 'bar']));   let nextArr = arr.setIn([0, 'foo'], 10); console.log(nextArr.getIn([0, 'foo']));   // 8. List 내장함수는 배열이랑 비슷하다 nextArr = arr.push(Map({ qaz: 3 })); console.log(nextArr.toJS()); nextArr = arr.filter(item => item.get('foo') === 1); console.log(nextArr.toJS());   // 9. delete 로 key 를 지울 수 있음 nextObj = nextObj.delete('foo'); console.log(nextObj.toJS());   nextArr = nextArr.delete(0); console.log(nextArr.toJS());     render(<App />, document.getElementById('root'));

 

 

state 안에서 사용하기 

Immutable 은 페이스북에서 만들었기 때문에 React 와 호환이 어느정도 되긴 합니다.

하지만, state 자체를 Immutable 데이터로 사용하는것 까지는 지원되지 않습니다.

따라서, state 내부에 하나의 Immutable 객체를 만들어두고, 상태 관리를 모두 이 객체를 통해서 진행하시면 됩니다.

- data 라는 Map 을 만들었고, 그 내부에는 users List 가 있고, 그 안에 또 Map 두개가 안에 들어있습니다.

 state = {
    data: Map({
      input: '',
      users: List([
        Map({
          id: 1,
          username: 'velopert'
        }),
        Map({
          id: 2,
          username: 'mjkim'
        })
      ])
    })
  }

ref. website: velopert.com/3486