[도서] 리액트를 다루는 기술 #컴포넌트 반복

 

 

 

6.1 자바스크립트 배열의 map() 함수

 

- 반복되는 코드 형태일 때, 코드양을 더더욱 늘어날 것이며 파일 용량도 쓸데없이 증가하게 된다.

- 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대 관리할 수 없다.

 

 

1️⃣ 자바스크립트 배열의 map() 함수

 

- 배열 객체의 "내장 함수" map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.

- map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.

 

 

👌 문법

 

arr.map(callback, [thisArg]);

 

🔷 callback : 새로운 배열의 요소를 생성하는 함수

 

- currentValue : 현재 처리하고 있는 요소

- index : 현재 처리하고 있는 요소의 index 값

- array : 현재 처리하고 있는 원본 배열

 

 

🔷 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

 

 

2️⃣ key

 

- key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.

- key가 없을 때는 virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다.

- key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

 

 

 

👌 key 설정

 

- key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.

- 언제나 유일해야 한다.

- 데이터가 가진 고윳값을 key 값으로 설정해야 한다.

- 고유 번호가 없을 경우 map 함수의 전달되는 콜백 함수의 인수인 index 값을 사용하면 된다.

- 단, 고유한 값이 없을 때만 index 값을 key로 사용해야 한다.

- index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못한다.

 

 

👌 데이터 추가 기능 구현하기

 

- 배열에 새 항목을 추가할 때는 push, concat을 사용할 수 있다.

- push함수는 기존 배열 자체를 변경, concat은 새로운 배열을 만들어 준다는 차이점이 있다.

- 불변성 유지 : 리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다.

- 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있다.

 

 

 

👌 데이터 제거 기능 구현하기

 

- 불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용

- filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류할 수 있다.

 

 

const numbers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter(number => number > 3);

 

 

- filter 함수의 인자에 분류하고 싶은 조건을 반환하는 함수를 넣어 주면 쉽게 분류할 수 있다.

- HTML 요소를 더블클릭할 때 사용하는 이벤트 이름은 onDoubleClick

 

<li key={name.id} onDoubleClick={() => onRemove(name.id)}>
	{name.text}
</li>

 

 

3️⃣ 정리

 

- 컴포넌트 배열을 렌더링할 때는 key 값 설정에 주의해야 한다.

- key 값은 언제나 유일해야 한다.

- key 값이 중복된다면 렌더링 과정에서 오류가 발생한다.

- 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등의 배열 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 한다.

 

 

 

#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)