3-2. List

List 는 배열 대신 사용되는 데이터 구조 입니다. 배열과 동일하게, map, filter, sort, push, pop 함수를 내장하고있습니다. 이 내장함수들이 실행되면, 또 다른 List 를 반환한다는점, 꼭 기억하세요.

리액트는 컴포넌트는 Immutable 의 List 와 호환이 되기 때문에, 이를 map 해도 컴포넌트로 렌더링 해 줄 수 있습니다.

생성하기

List 를 생성 할 땐 다음과 같이 합니다.

var List = Immutable.List;

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

만약에 객체들의 배열이라면 다음과 같이 해줘야 추후 get 과 set 등을 할 수 있습니다.

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 과 마찬가지로 List 도 toJS 를 통하여 일반 배열로 변환 할 수 있습니다.

console.log(list.toJS());

값 읽어오기

n 번째 아이템을 읽어올땐 다음과 같이 하면 됩니다: .get(n)

list.get(0);

0번째 아이템의 value 값을 읽어올 땐 다음과 같이 하면 되지요.

list.getIn([0, 'value']);

아이템 수정하기

n 번째 아이템을 수정해야 할땐 다음과 같이 하면 됩니다.

var newList = list.setIn([0, 'value'], 10);

다른 방법으로는, 이렇게 해도 됩니다.

var newList = list.update(
  1, 
  item => item.set('value', item.get('value') * 5)
)

값을 업데이트 해야 하는데, 기존 값을 참조해야 하는 경우엔 위와 같 update 를 사용하면 편합니다.

만약에 update 를 사용하지 않았더라면, 다음과 같이 해야겠죠?

var newList = list.setIn([1, 'value'], list.getIn([1, 'value']) * 5);

상황에 따라 여러분이 편리한 방식을 선택하시면 되겠습니다.

만약에 내부 값을 수정하는게 아니라 그 아이템 자체를 수정하는거라면 set 을 쓰면 되겠죠?

list.set(0, Map({ value: 10 }))

아이템 추가하기

아이템을 추가 할 땐, push 를 쓰면 됩니다. 이 함수를 쓴다고 해서 Array 처럼 기존 List 를 수정하는건 아니니, 안심하고 사용해도 됩니다.

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

맨 앞에 넣고 싶다면, unshift 를 사용하세요

var newList = list.unshift(Map({value: 0}))

아이템 제거하기

아이템을 제거 할 땐, delete를 사용하면 됩니다.

var newList = list.delete(1);

이렇게하면 인덱스가 1인 아이템을 제거해주죠.

pop 을 하면 가장 마지막에 있는 아이템을 없애줍니다.

var newList = list.pop();

크기 가져오기

List 의 크기를 가져올땐 size 를 사용합니다.

console.log(list.size);

비어있는지 확인 할 때는 isEmpty() 를 사용하세요.

list.isEmpty()

자, Immutable 에서 가장 많이 사용되는 데이터구조 Map 과 List 에 대해서 배웠습니다. 이 외에도 다른 데이터 구조들이 있는데 이 두개만 알고있어도 리덕스에서 사용하는데에는 충분합니다. 여기서 아직 다루지 못한 함수들도 꽤 있는데 관심이 있다면 공식문서 를 읽어보시길 바랍니다.

이제, 우리가 지금까지 배운것들을 가지고, 리덕스에서 사용해보도록 하겠습니다.