팀원들끼리 코드리뷰를 하던 중 같은 기능이지만 나는 concat으로 구현을 했고, 팀원 중 한명은 push로 구현하였다. 이 부분을 가지고 서로 무엇이 더 좋은 방식인가에 대해 알아보았고, concat과 push 중 최선의 선택을 할 수 있었다.
1. push()
배열 메소드를 정리하면서 push()에 대해 한번 다뤘었다. push()의 특징은 원본배열의 마지막 인덱스에 값을 추가하고, 원본이 변경된다.
let arr = [1,2];
console.log(arr); // [1, 2]
arr.push(3);
console.log(arr); // [1, 2, 3]push()를 사용하는 것이 무조건적으로 나쁘다는 것이 아니라 상황에 맞게 쓰되, 불변성을 지키기 위해서는 사용을 지양해야한다.
2. concat
concat()은 기본 배열이나 값을 토대로 새로운 배열이 리턴이 된다. 원본 데이터의 변화가 일어나지 않는다.
let arr = [1, 2];
let concatedArr = arr.concat(3);
console.log(arr); [1, 2]
console.log(concatedArr); [1, 2, 3]같은 배열을 만들었지만 concat()은 원본 배열 arr의 변화가 없지만 push()는 배열arr자체가 바뀌어버렸다.
예시
그렇다면 왜 원본 데이터의 변화 유무가 중요할까? 앞서 설명을 하면서 불변성에 대해 잠깐 다루었다. 불변성은 객체가 생성된 이후에 그 상태를 변경할 수 없는 디자인 패턴을 말한다. React에서는 객체를 참조하여 전달을 하기 때문에 참조를 당한 객체들의 원본이 변형되는 것은 큰 문제를 야기할 수 있다.
push사용
createCommnetBtn = (e) => {
e.preventDefault();
const { commentList, value } = this.state;
commentList.push({
id: commentList.length + 1,
userName: "userName",
value,
isLiked: true,
});
console.log(this.state.commentList);
this.setState({
commentList : commentList
})
});
};push를 사용하면 state의 값을 직접적으로 바꾸기 때문에 원본 배열의 변화가 일어나 불변성을 지킬 수 없게 된다.
그리고 commentList에 push를 했기 때문에, 다시 한 번 this.setState()를 사용해 state의 값을 바꿔줄 필요가 없다.
우리가 this.setState()를 사용해 state의 값을 바꿔야 하는데 push를 통해 commentList에 먼저 값이 할당되어서 굳이 쓸 필요가 없어진다는 것이다.
이를 확인하기 위해 push를 한 직후 commentList를 console에 찍어보면, 우리가 원하는 기대값은 빈 값이지만 값이 출력된다.
concat사용
createCommnetBtn = (e) => {
e.preventDefault();
const { commentList, value } = this.state;
this.setState({
commentList: commentList.concat({
id: commentList.length + 1,
userName: "userName",
value,
isLiked: true,
})
});
};concat사용 시 원본의 데이터의 변경이 일어나는 것이 아니기 때문에 불변성을 지킬 수 있으면서 가독성면에서도 더 좋다.
결론
- React에서는 항상 불변성에 대해 고려하자
- 불변성을 지키기 위해 원본 데이터의 변화가 없는 방식을 지향하자
코드리뷰를 통해 내가 쓴 코드에 대해 설명하고, 다른 사람이 쓴 코드를 보며 이런 방법도 있겠구나 하는 것을 많이 느끼고있다. 그리고 이런 효과를 통해 전에 공부했던 불변성, 배열 메소드 중 원본의 변화를 주는 메소드에 대해 정리했던 것들이 퍼즐이 맞춰지듯 맞춰지며 실제로 어떻게 중요한 지에 대해 알 수 있었다.
