TIL46⎟React : push vs concat

인스타그램 클론 코딩의 댓글 추가기능을 구현 중 나는 push 메소드를 사용하였고 같은 팀원인 주영님은 concat을 사용한 것을 볼 수 있었다.

이것에 대한 정보를 찾아보다가 React의 불변성이라는 중요한 개념을 알았기에, 정리해보고자 한다.

두 메소드의 같은 점은 배열안에 요소를 추가해 준다는 점이다. 다른 점은 리턴 되는 값이 다르다는 것이다. push는 리턴값이 새롭게 생성된 배열안의 요소의 개수이며 concat은 원본 배열을 유지한 채 배열을 반환한다.

push

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

• arr 원본배열 자체가 변한 걸 알 수 있다.

concat

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

• 기존의 배열은 그대로 유지한 채, 새로운 배열이 리턴된다.

push를 쓴 이유

우리가 구현하는 기능은 배열을 리턴하는 것이 아닌 단순히 요소들을 '저장'하고 '추가'한다는 점에서 나는 push나 concat이나 쓰는 것에 대한 차이점이 없다고 생각하였다. 하지만 이는 state의 불변성에 어긋난다.

처음 작성한 코드는 단순히 새로 추가된 userComment들을 userComments에 push해주는 코드이다.

class Main extends React.Component {
   state = {
     userComment: "",
     userComments: [],
   };

   createText = (e) => {
     this.setState({
       userComment: e.target.value,
     });
   };

   addText = (e) => {
     const addTextList = this.state.userComments;
     addTextList.push(this.state.userComment);
     this.setState({
       userComments: this.state.userComments,
       userComment: "",
     });
   };

React의 가장 큰 특징, 불변성

댓글을 담은 배열에 계속해서 댓글을 push해주면 원본 자체가 변하게 되어 state의 불변성에 어긋나게 된다. React에서는 state 내부의 값을 직접적으로 수정하면 안된다.

React는 state 기준으로 변할 때마다 렌더링하기 때문에 push를 하면 변동사항을 알 수 없다. 그렇기 때문에 concat 혹은 spread operator를 사용해야한다. 불변성을 유지해야 성능도 최적화 할 수 있기 때문이다.

Refactoring✍️

addText = (e) => {
     const { userComment, userCommentLists } = this.state;
     const newCommentLists = [
       ...userCommentLists,
       {
         id: userCommentLists.length + 1,
         userName: "itssweetrain",
         content: userComment,
       },
     ];

     this.setState({
       userCommentLists: newCommentLists,
       userComment: "",
     });

...spread

React는 독특하게 업데이트라는 개념을 가지고 있다. 즉 기존의 값을 가져온 다음에 바뀔 부분을 고치고 업데이트를 진행한다.

예를 들어 자바스크립트에서는,

let obj = { a : 1, b : 2 }
obj.a = 3
let obj = { a : 3, b : 2}

이렇게 let을 이용하여 새로 값을 업데이트해주는 것만으로도 값이 수정이 되었는데 리액트는 기존의 값을 가져온 뒤에 업데이트를 진행해야 한다.

const obj = { a : 1, b : 2 }
obj={...obj, b:3}
const obj = { a : 1, b : 3}

이처럼 수정하고 싶은 값만 변경하고 값을 업데이트 해주어도 된다.

💡 What I learned

push나 concat이나 정상적으로 기능은 작동한다. 그래서 push 메소드를 쓰는 것에 대한 의심을 하지 않았다. 서로에 대한 리뷰를 통해 '왜 나는 그 메소드를 사용하였는가?'에 대한 물음에 대한 답변을 할 수 있어야겠다고 느꼈다.

모두가 다른 코드를 작성한다. 하지만 왜 그렇게 작성했는지, 왜 그 메소드를 썼는지 자신만의 명확한 근거와 이유가 있으면 된다. 의견을 나누는 과정에서 새로운 지식을 얻고 나의 이유를 수정하고 코드를 고쳐나가는 과정 또한 협업에서 필요한 자세라고 생각된다.