컴포넌트 반복

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

 

map( ) 함수의 문법은 다음과 같다. 
첫 번째 인수는 콜백 함수를 받는다.

콜백 함수의 인자로는 (value, index, array) 세 가지를 받는다. 
-value: 현재 반복되고 있는 array요소 값
-index: 현재 반복되고 있는 array요소의 index값
-array: 현재 반복되고 있는 배열 그 자체

ex) array.map((value,index,array) => { })
두 번째 인수는 callback 함수 내부에서 사용할 this 레퍼런스를 받는다.

const numbers = [1, 2, 3, 4, 5];

const doubleNumbers = numbers.map((v) => {
	return v * 2;
});

console.log(doubleNumbers); // [2, 4, 6, 8, 10];

 

  이러한 방법을 이용해서 컴포넌트로 구성된 배열을 생성할 수도 있다. 설명보다는 예시를 보는것이 더 직관적으로 이해하기 쉬울 것 같다. 다음 코드를 보자.

 

const names = ['woo', 'park', 'kim', 'lee']
{names.map((name, index) => <li key={index}>{name}</li>};

 

  이러한 방법으로 반복을 통해서 해당 데이터를 JSX 코드로 된 배열을 새로 생성할 수 있다. 이를 통해 컴포넌트에 렌더링을 하면 매우 간단하게 코드를 작성할 수 있다. 그리고 가장 중요한 점은 map() 메서드는 새로운 배열을 생성해서 반환한다는 점이다. push메서드의 경우에는 원본 배열을 변경하게 된다. 이 둘의 차이점은 새로운 배열이 생성되느냐 원본 배열의 상태를 변경하느냐인데, 리액트에서는 이 점이 매우 중요하다. 그리고 리액트에서 데이터를 업데이트 해줄 때는 항상 새로운(New) 데이터로 업데이트를 해주어야 한다. 이를 불변성 유지라고 하는데 불변성을 유지해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문이다. 즉, 기존 DOM과의 비교를 보다 쉽게 하기 위해서라고 나는 이해했다. 그래서 map( )메서드는 리액트에서 매우 유용하다고 생각한다. 

 

  여기서 또 주의해야할 점이 한 가지 있다! 바로 map( )을 통해 생성되는 컴포넌트 배열은 prop으로 key를 설정해 주어야 한다. 이 key는 고유한 값이어야 한다. 

 

  key를 왜 설정해야할까? key가 없는 경우에는 리액트 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있기 때문이다.

 

  key를 설정하는 방법은 자유롭게 설정하는것이 좋지만 고유한 값으로 설정해야 하며, index번호는 피하는것이 좋다. 배열이 변경되는 경우에 효율적으로 리렌더링하지 못하기 때문이다. 별도로 id 데이터를 만들어 사용해도 좋고, uidd 라이브러리를 사용해 id를 활용하는 방법도 있다.

 

지금까지 리액트 컴포넌트 반복에 대해서 알아보았다😁