[React] - 15) 리액트에서 배열을 처리하는 방법

안녕하세요

 

이번 포스팅에서는 리액트에서 배열을 처리하는 가장 기본적인 방법에 대해 알아보겠습니다.

 

리액트의 불변성을 유지해주어야 한다, 라는 특성 상 리액트에서 배열을 처리하는 방법은 다소 다릅니다.

 

함수형 컴포넌트로 만들었다고 할 때, 각 배열을 처리하는 법을 알아보았습니다.

새로운 데이터를 추가해 줄 때

기존 배열을 복사한 후 추가할 내용을 덧붙인다.

setArrayData({
  ...Arraydata,
  array: data.array.concat(info)
});

...ArrayData로 배열을 얕은 복사하여(자바스크립트의 전개 연산자 문법),

 

Concat 메소드를 이용하여 배열에 데이터를 추가해 줍니다.

 

이 때에, 배열을 직접적으로 건드리는 것이 아닌(리액트의 불변성에 어긋)

 

복사하여 간접적으로 건드린다는 것이 중요한 점입니다.

 

배열에 값을 추가한다고 기존의 push 함수를 사용하게 되면, 리액트의 불변성을 해치게 됩니다.

기존 데이터를 삭제할 때

자바스크립트의 filter 함수를 사용하여 삭제할 데이터를 걸러낸다.

 

자바스크립트 배열의 내장함수인 filter는 이름 그대로 배열 내에 필터를 적용하여 조건식에 걸러지는 원소들을 제외합니다.

 

자세한 내용은 제 이전 포스팅을 참고하셔도 될 것 같아요!

 

자바스크립트의 filter 함수

 

데이터 추가와 마찬가지로, filter 함수는 새로운 배열을 만들어주는 함수이기 때문에 리액트의 불변성을 해치지 않습니다.

기존 데이터를 수정할 때

데이터를 추가할 때와 마찬가지로, 얕은 복사 후, 데이터를 변경해 준다.

setData({
  ...data,
  number: 3
});

이토록 리액트에서 state를 처리할 때는 항상 간접적으로 처리해 주어야 한다는 걸 알았습니다.

 

리액트의 불변성을 지키는 것이 다소 귀찮은 작업이긴 하지만, 컴포넌트 최적화와 리액트의 신념(?) 유지를 위해 어쩔 수 없겠네요!