React - Concat(), spred syntax

군밤먹으면서코딩·2021년 6월 25일
0

React

목록 보기
5/8
post-thumbnail

프로젝트를 하면서 그동한 생소해서 써보지 못했던 함수들을 정리해보려고 한다.

Concat()

공식문서를 보면 '모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.' 라는 문구가 있다.

concat() 메서드는 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 return한다.

여기서 중요한점!!

  • 기존 배열을 변경하지 않는다!
  • 추가된 새로운 배열을 반환한다!

배열에 변화를 줄때, 불변성을 지켜줘야 하는 React에서 push()메서드를 사용하는것 보다는 concat()메서드를 사용하는 것이 더 조으다🏆

Spred 연산자

concat() 연산자 처럼 배열의 불변성을 지켜주면서 새로운 요소를 추가하는 방법이 스프레드 연산자이다.

이 두가지 방법을 써보고 싶어 내 코드에 두가지 코드를 직접 사용해 봤다!!

Concat() 메서드 예시

  addReply = () => {
    this.setState({
      replys: this.state.replys.concat(
        this.state.content
        // content: this.state.content,
      ),
    });
  };

위 코드는 댓글 생성 버튼을 클릭 했을때 replys 라는 배열에 새로운 요소를 추가하는 코드이다.
concat을 사용하면서 재미있었던 점은 배열 안에 기본적인 요소를 삽입할 수도 있고, 객체를 추가할 수도 있다는 점이다! 주석으로 표시한 content: this.state.content 를 입력하면 replys배열 안에 content 객체를 넣어 props로 전달할 수 있다!

... 연산자 예시

this. setState({
  replys: [...this.state.replys, this.state.conntent],
});

...연산자는 기존의 배열인 replys를 헤치지 않고 컴마 뒤에 써준 this.state.content를 추가해 주는 것이다.( 바로 뒤에 이어서 추가해 주는것!! )

둘 다 코드의 불변성을 유지시켜주는 메서드들이니 자주 써보도록 해야겠다.

  • ...연산자는 동기님 코드를 보며 알게 되었는데, 보기엔 어려워 보이지만 익숙해지면 상당히 유용할 것 같아 알려달라고 졸랐다. 설명을 듣는 와중에 내가 사용한 concat() 메서드를 설명해 주면서 해당 메서드를 더 잘 이해하게 된 것 같아 아주 유익했다 🧐

  • 역시 말하고 들으면서 공부하는 것이 더 멀머리에 잘 들어오는 것 같다!!😀

0개의 댓글