Immutable(2) - MoonGyeongHyeon/React_Study GitHub Wiki

React - Immutable.js(2)

List

List는 배열 대신 사용되는 데이터구조다. Javascript의 배열과 동일하게 map, filter, sort, push, pop 등과 같은 내장 메소드를 지원한다. 이러한 내장 메소드의 결과는 항상 새로운 List라는 걸 잊지말자. 리액트의 컴포넌트는 Immutable의 List와 호환이 되기 때문에 이를 map 메소드로 렌더링할 수도 있다.

생성하기

일반적인 생성 방법은 아래와 같다.

var List = Immutable.List;
var list = List([0,1,2,3,4]);

만약 List의 원소가 객체라면 Map 형태의 값을 넣어줘야 한다.

var List = Immutable.List;
var Map = Immutable.Map;
var fromJS = Immutable.fromJS;

var list = List([
  Map({ value: 1 }),
  Map({ value: 2 })
]);

// or

var list2 = fromJS([
  { value: 1 },
  { value: 2 }
])

Map 함수 또는 fromJS 함수를 이용하여 List를 생성할 수 있다.

Map과 마찬가지로 List도 toJS 메소드를 통해 일반 배열로 변환할 수 있다.

사용 방법

• 값 읽어오기

  다음과 같이 사용한다.

  list.get(0);
  // 0 번째 아이템을 읽어온다.
  
  list.getIn([0, 'value']);
  // 0 번째 아이템의 value 속성 값을 읽어온다.
  

• 아이템 추가/제거/수정하기

  추가는 push 를 사용하면 된다. 배열처럼 기존의 값에 추가하는 게 아니라 새로운 List를 반환한다. 이는 제거, 수정도 마찬가지다. 원소를 맨 앞에 넣고 싶다면 unshift 를 사용한다.

  var newList = list.push(Map({ value: 3 }));
  var newList2 = list.unshift(Map({ value: 3 }));
  

  ​

  제거는 delete 를 사용하면 된다. 인자로 index 값을 넘긴다. 맨 뒤의 원소를 삭제하고 싶다면 pop 을 사용한다.

  var newList = list.delete(1);
  var newList2 = list.pop();
  

  ​

  수정은 setIn 을 사용한다. 다른 방법으로는 update 를 사용하는 방법도 있다.

  var newList = list.setIn([0, 'value'], 10);
  // 0번 원소의 value 속성 값을 10으로 바꾼다.
  
  var newList2 = list.update(
  	1,
  	item => item.set('value', item.get('value') * 5)
  );
  // update(index, callback)
  // list 중 index 번째 원소에서 callback 함수를 처리한다.
  // 즉, 1번 원소를 수정하는데, 1번 원소를 item이라는 인자로 넘겨 callback을 처리한 결과를 반환한다.
  

• 크기 가져오기

  크기를 가져올 땐 size 를 사용한다. 비어 있는지 확인할 땐 isEmpty 를 사용한다.

  list.size;
  
  list.isEmpty();