[TIL] concat( ) VS push( )

React logo

◎ Javascript에서 내장 함수를 배울 때 이미 다뤘던 함수들이다.

하지만 리액트에서 이 두 개의 함수를 상황에 맞게 잘 사용하 여야 성능이 좋아진다.

간략하게 차이를 알아보자.

1. push

◎ push는 기존 배열에 값을 추가하여 원본을 바꾼다.

1-2. 예시

const array = [1, 2];
array.push(3);
console.log(array); // [1, 2, 3]

위의 코드를 확인해보면 array배열에 array.push(3)를 하고 array를 결과를 확인해보면 array 배열 자체가 변경된 걸 확인할 수 있다.

2. concat

◎ concat은 기존 배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다.

2-1. 예시

const array =[1, 2];
let result = array.concat(3);
console.log(array); // [1, 2]
console.log(result); // [1, 2, 3]

위의 코드를 확인해보면 result라는 변수에 array.concat(3)을 하고,

먼저 array값을 확인하면 기존 배열 값 [1, 2]가 그대로 나오며,

array.concat(3)한 변수 result의 값을 확인해보면 [1, 2, 3]이 나오는 걸 확인할 수 있다.

3. 적용 예시

◎ 위스타그램 댓글 구현할 때 state에 빈 배열(comments)을 설정해주고  input값을 빈 배열에 넣고 this.state() 해서 댓글을 보여줘야 하는 기능을 구현해야 한다.

처음에 push()를 사용한 코드를 보자.

 

push

코드를 보면 comments 배열에 push()를 사용하여 state값을 변경하고 있다. 

위의 코드는 직접적으로 state의 값을 변경하고 있어서 좋지 않은 코드이다.

이제는 concat()을 사용하여 추가한 코드를 봐보자.

 

concat

코드를 보면 newComments 변수에 comments.concat을 하여 추가해야 되는 값들을 넣어주고

this.setState()에 comment 키의 value를 concat함수를 사용하여 새로운 배열을 만든 newComments를 설정하였다.

원본을 바꾸지 않는다라는 것은 react에서 immutable이라고 한다.

4. 결론

• state에 새로운 값을 추가할 때 push와 같은 원본 데이터를 변경하는 것은 쓰지 말자.

• concat과 같은 새로운 데이터를 추가하는 것을 사용하자.(성능 개선할 때 좋고 편하다)