[React 공부 전 알아야 할 JavaScript]_리스트 렌더링

이번 포스트는 map(), filter(), find(), reduce(), 4가지 함수에 대해 포스팅하겠습니다.

map()

배열의 모든 요소를 하나씩 원하는 형태로 변환해주는 함수입니다.

// 화면 그릴 때
const posts = [{id: 1, title: '첫 글'}, {id: 2, title: '두 번째 글'}];
const list = posts.map(post => <li key={post.id}>{post.title}</li>);

// 데이터 수정할 때(상태 업데이트)
const users = [{id : 1, name : 'A'}, {id : 2, name : 'B'}];
const updated = users.map(u => u.id === 1 ? {...u, name : 'Modified'} : u);

React에서 대부분의 경우 화면 그릴 때 사용합니다. 태그에 key값이 있는 이유는 나머지 기존 요소들은 그대로 둔 채 새로운 요소만 추가하기 위함입니다.

filter()

배열에서 조건에 맞는 데이터만 추출해 새로운 배열을 만들 때 사용합니다.

const products = [
  { name : '사과', price : 1000 },
  { name : '수박', price : 5000 }
];
const cheap = products.filter(item => item.price < 2000);
console.log(cheap); // [{ name : '사과', price : 1000 }]

'삭제 기능'을 만들 때 필수입니다. 삭제 한 후 나머지 데이터를 보여줄 때 사용합니다.

find()

조건에 맞는 첫 번째 데이터 하나만 추출할 때 사용합니다.

const users = [{ id : 1, name : '철수' }, { id : 2, name : '영희' }];
const user = users.find(u => u.id === 2);
console.log(user); // { id : 2, name : '영희' }

게시판 목록에서 특정 게시글을 클릭했을 때, 그 게시글의 상세 내용 하나만 가져와서 보여줄 때 사용합니다.

reduce()

데이터 타입에 따라 결과가 다릅니다. 숫자 배열일 때는 합계, 문자열 배열일 때는 개수(카운팅)를 세는 객체를 결과로 도출합니다. 그리고 배열을 합쳐서 2차원 배열을 1차원으로 펼칠 수도 있습니다.

// 기본 문법 구조(주로 누적값과 현재값만 사용)
배열.reduce((누적값, 현재값, 인덱스, 원본배열) => 다음 누적값, 누적값의 초기값);

// 숫자 배열인 경우
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0); 
console.log(sum); // 10

// 문자열 배열인 경우
const items = ['apple', 'banana', 'apple', 'orange'];
const count = items.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {}); 
console.log(count); // { apple : 2, banana : 1, orange : 1 }

// 배열 합치기(2차원 배열 -> 1차원 배열)
const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, cur) => acc.concat(cur), []);
console.log(flat); // [1, 2, 3, 4, 5, 6]

유의사항 : 초기값을 설정하지 않으면 0번 인덱스를 초기값으로 사용하고 현재값은 1번 인덱스부터 시작합니다.

reduce()는 단순 나열이 아닌 통계를 내거나 재조합 할 때 유용합니다.


다음 포스트는 조건부 렌더링에 대한 내용으로 포스팅하겠습니다.