리액트에서의 메서드 (map, concat, filter)

리액트를 기초부터 다시 공부해보려고 한다.

우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :)

 

Map

• 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성
• 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~!

이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다.

이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다.

const names = ["눈사람", "얼음"];
const nameList = names.map((name, index)=> <li key={index}>{name}</li>);

key를 설정해줘야 하는 이유

• key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용
• 값이 없으면 Virtual DOM은 배열을 순차적으로 비교하면서 변화를 감지
• 있다면 이 값을 활용해 어떤 변화가 있는지 빠르게 알아낼 수 있음
• 그래서 key는 index 값 말고 고유한 값 예: id, uuid 등등)으로 설정하는게 좋음

 

Concat

• 주어진 배열 또는 값들을 기존 배열에 연결하여 새로운 배열 생성
• 원본 배열은 변경되지 않음

const names = ["눈사람", "얼음"];
const nameList = names.map((name, index)=> <li key={index}>{name}</li>);

const newNameList = nameList.concat("빙하");

concat을 사용하는 이유

• 불변성을 유지해주기 때문
  • 리액트는 상태를 업데이트할 때 기존 상태를 그대로 두면서 새로운 값을 설정해야 함. 그래야지 나중에 리액트 컴포넌트의 성능을 최적화할 수 있음
• push는 기존 배열 자체를 변경해주는 반면, concat은 새로운 배열을 만들어줌

 

Filter

• 배열에서 주어진 조건을 만족하는 요소들로 이루어진 새로운 배열 생성
• 원본 배열을 변경하지 않음

const names = ["눈사람", "얼음"];
const nameList = names.map((name, index)=> <li key={index}>{name}</li>);

const newNameList = nameList.concat("빙하");
// ["눈사람", "얼음", "빙하"];

const filterList = newNameList.filter(name => name !== "얼음");
// ["눈사람", "빙하"];

 

위에 세 가지 메서드는 리액트 자체 성능에 큰 영향을 끼칠 수 있다.

• 데이터 양과 복잡성
  • 데이터 양이 많거나 복잡한 경우 map과 filter는 렌더링 지연을 발생 시킬 수 있음 -> 메모이제이션 고려
• 렌더링 주기
  • 컴포넌트가 렌더링 될 때마다 map과 filter 메서드를 호출하면 성능 문제 발생할 수 있음 -> 훅 사용하여 최적화

 

그 외에도 많은 영향을 끼칠 수 있기 때문에 단독으로 사용하는 것 보다 hook을 적절하게 사용하는 것이 중요하다.