배열 렌더링하기
map
자바스크립트 배열 내장함수 중 하나이다.
배열을 특정 함수를 사용해 전체적으로 변환해주고 싶을때 사용하는 함수이다.
리액트에서 내부적으로 제거/업데이트/추가를 할 때 해당 작업을 효율적으로 하기 위해 필요하다.
배열을 렌더링할 때는 key값이 필수로 들어가야 한다.
만약 key를 넣지 않을 경우 렌더링은 되지만, key가 없다는 에러가 발생한다. (해당 배열의 index가 key로 자동 적용되긴 함. 하지만 만약 데이터를 제거/변경/추가할 경우 key값이 계속해서 수정된다.)
배열에서 데이터 제거하기
불변성을 유지하면서 배열 속 데이터를 제거해보자.
.slice
const numbers = [1, 2, 3, 4, 5];
// slice와 concat을 이용할 수 있다. (배열 속 데이터 삭제 예시)
numbers.slice(0,2).concat(numbers.slice(3, 5)) // 결과: [1, 2, 4, 5]
// spread 함수를 이용할 수도 있다. (배열 속 데이터 수정 예시)
[
...numbers.slice(0,2),
10,
...numbers.slice(3, 5)
] // 결과: [1, 2, 10, 4, 5].filter
특정 조건을 가지고 값들을 필터링 해줄 수 있다.
numbers.filter(n => n > 3); // [4, 5]
numbers.filter(n => n !== 3) // [1, 2, 4, 5]- 배열 내장함수 slice
- 배열 내장함수 filter
- 코드(배열 속 데이터 삭제): https://codesandbox.io/s/0p9k99l48w
배열 안의 데이터 수정하기
const numbers = [1, 2, 3, 4, 5];
// spread 함수 이용해 데이터 수정
[
...numbers.slice(0, 2),
9,
...numbers.slice(3, 5)
] // 결과: [1, 2, 9, 4, 5]
// map 이용해 데이터 수정
numbers.map(n => {
if(n === 3) {
return 9;
} else {
return n;
}
}) // 결과: [1, 2, 9, 4, 5]- 코드(배열 속 데이터 수정): https://codesandbox.io/s/1l6x9mqv4
주니어 프론트엔드 개발자 👼🏻