ImmutableJS 이란 무엇인가?
ReactJS 의 불변성과 immutableJS
원래 필자의 경우는 VueJS 를 이용하여 프론트 개발을 해왔었다. VueJS 에서는 데이터의 불변성에 대해서 ReactJS 만큼 개발자에게 중요하지 않다. (VueJS 에 대한 자세한 설명은 이 포스팅에서 따로 설명하지 않는다.) 하지만 ReactJS 를 조금이라도 공부를 했더라면 불변성이라는 단어를 한번쯤이면 들어봤을 것이다. ReactJS 에서는 state 의 불변성이 보장되어야 컴포넌트의 최적화 및 리렌더링을 보장받을 수 있다.
ReactJS 에서 불변성을 관리해주는 써드 파티 라이브러리로는 immerJS 혹은 immutableJS 가 대표적으로 많이 이용한다. 그 중에서 필자의 경우 immutableJS 를 선택하였는데 그 이유는 ReactJS 와 마찬가지로 페이스북에서 만들었다라는 큰 장점이 있다. 그리고 무엇보다 2018년 11월 18일 기준 다운로드의 수 역시 약 5배 이상 차이가 난다.
immutableJS 의 다운로드 수
immerJS 의 다운로드 수
이제 본격적으로 immutableJS 에 대해서 살펴보도록 하자. 아래의 예제와 관련된 레파지토리는 여기 에서 살펴볼 수 있다.
ImmutableJS 시작하기
먼저 immutableJS 를 사용하기 위해서는 다른 라이브러리와 마찬가지로 해당 모듈을 설치해주면 된다.
1 | npm install immutable |
그 후 아래와 같이 필요한 메소드를 이용해서 이용하면 된다.
fromJS
밑에서도 하나씩 설명을 하겠지만 ReactJS 로 개발을 하다보면 제일 많이 하는 것이 API 의 데이터를 받아와 View 에 알맞게 데이터를 가공해주는 일이다. 하지만 API 의 데이터를 받아와서 하나씩 immutableJS 의 데이터 구조에 맞는 객체로 만들어 주기도 힘들거니와 데이터 타입 역시 추적하기가 힘들다. 그럴 때 제일 많이 쓰는 메소드로서, 쉽게 이야기해서 안의 구조는 어떻게 돠어있는 지 모르고 있더라도 쉽게 immutable 객체로 만들어 준다.
기본적으로 immutable 의 메소드를 사용하기 위해서는 꼭 immutable 객체가 여야 하니, API 를 이용하여 데이터를 받아온다면 굉장히 유용한 메소드가 될 수 있다. 이렇게 생성된 immutable 객체의 getter 함수부터 하나씩 살펴보도록 하자.
get 메소드
get 메소드는 우리가 원하는 값을 받아오는 데 유용한 메소드이다. immutable 의 Map 이든 List 이든 둘다 get 메소드를 이용해서 읽어올 수 있다.
만약 Map 형태의 경우 아래와 같이 두번째 인자로 default 값을 설정해주면 해당 키에 해당 하는 데이터가 없는 경우 설정한 default 값이 반환된다.
getIn 메소드
위처럼 get 메소드만 이용해서 이렇게 쉽게 끝난다면 우리는 굳이 ImmutableJS 라이브러리를 사용할 필요가 없다. 아마 개발을 하다보면 위처럼 간단한 구조의 데이터 구조를 이용하는 경우보다 깊이가 깊은 복잡한 데이터를 이용하는 경우가 더 많을 것이다.
set 메소드
위에 처럼 이제 가져왔다면 데이터를 아마 추가 해야 하는 경우도 생길 것이다. 그런 경우는 immutable 객체를 이용하고 있다는 것만 기억하면 된다.
set 메소드는 기존의 데이터를 바꾸는 것이 아니라, 기존 데이터를 그대로 둔 채 사본을 반환해주기 때문에 기존의 값을 변경할 경우는 위와 같이 기존 값을 재할당 해주면 된다.
List 의 경우는 마찬가지로 insert 라는 메소드를 이용할 수도 있다.
setIn 메소드
getIn 과 마찬가지로 아마 set 에서도 복잡한 구조에 대한 setter 에 대한 것은 setIn 을 이용해서 사용할 수 있다.
unshift 메소드 와 push 메소드
아마도 Javascript 개발자라면 Javascript 에서 기본적으로 제공해주는 unshift 와 push 메소드의 편의성을 잘 알고 사용하고 싶은 욕구가 생길 것이다. ImmutableJS 에서도 친절하게 Immutable 의 List 객체에 대해서 동일한 API 를 제공해준다. List 맨 앞에 요소를 추가하고 싶을 경우는 unshift 메소드를 사용하면 되고, 뒤에 요소를 추가하고 싶으면 push 메소드를 사용하면 된다.
shift 메소드와 pop 메소드
친절하게 위와 같이 마찬가지로 shift 와 pop 메소드도 지원한다. 다만 기존의 Javascript 에서는 원본의 데이터에서 제거된 대상을 return 해주지만, immutableJS 는 제거되고 남은 카피 데이터를 리턴해준다. (우리는 Immutable 객체를 이용하고 있다는 것을 잊지 말아야 한다.)
first 메소드 와 last 메소드
위와 같이 List 의 경우는 쉽게 첫번째 값을 가져오고 뺄 수 있듯 Map 에도 그러한 게 존재한다. 만약 첫번째 키의 값을 가져오려면 first 메소드를 사용하면 된다. 반대로 마지막 키의 값을 가져오려면 last 메소드를 사용해주면 된다.
has 메소드
만약 Map 객체에서 해당 키를 가지고 있는지 여부를 확인하려면 has 메소드를 이용하면 된다. 그러면 그 여부에 따라 boolean 값을 반환한다.
위와 같이 간단하게 나마 ImmutableJS 에 대해서 알아보았다. 개인적으로는 API 만 제대로 숙지한다면 어려움이 없는 라이브러리라 생각된다.