TIL - MAP, FILTER 내장함수

jake·2021년 11월 7일
0

TIL

목록 보기
14/54
post-thumbnail

오늘 알아본 내용은 자주 사용하지만 제대로 모르던 배열객체 내장함수!

  • map

  1. 반복되는 컴포넌트를 렌더링 할 때 사용하며, 파라미터로 전달된 함수를 사용해서 배열내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과를 새로운 배열을 생성합니다.
  2. map을 사용할때 써주는 key는 배열을 렌더링했을때 어떤 원소에 변동이 있었는지를 알아내려고 사용합니다. key가 없으면 배열을 순차적으로 선회하기 때문입니다. 키값을 부여하지 않으면 개발자도구에 아래와같은 오류가 나타납니다.
  3. 만약 key에 써줄 고유값인 id값이 없을 때는 콜백함수의 인수인 index를 사용한다.
    여기서 주의할 점은 index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더랑 하지 못합니다!
  4. map을 활용하여 새로운 이름을 추가하는 것을 만들어보았습니다.
    배열에 새 항목을 추가할 때 push 함수가아닌 concat을 사용하였는데, push함수는 기존배열 자체를 변경해주는 반면 concat은 새로운 배열을 만들어준다는 차이점이 있기 때문입니다.
    액트는 상태를 업데이트 할때 기존상태를 그대로 두면서 새로운 값을 상태로 설정해야합니다.
    이것을 불변성 유지라고 하며 불변성 유지를 잘 해주어야 리액트 컴포넌트의 성능을 최적화 할 수 있습니다.

  • filter

  1. 배열의 항목을 제거할때도 마찬가지로 불변성 유지를 해줘야합니다. 이때 사용하는 것이 내장함수 filter입니다. 특정 조건에 만족하는 원소들만 쉽게 분류 할 수 있습니다.
profile
열린 마음의 개발자가 되려합니다

0개의 댓글