Array.prototype.map()을 통해서 자식 컴포넌트에게 값 전달하기
Array.prototype.map() 란?map은 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메소드입니다. 우리가 가져온 프로필 정보를 map 메소드를 통해서 컴포넌트에 다 전달해보도록 하겠습니다.map 메소드의 매개변수map 메소드는 현재 값, 인덱스(현재 처리되는 요소의 배열 내 인덱스), 본래 배열의 순서로 매개변수 값을 가집니다. 위의 예시를 보면 nums라는 배열에 1~5까지의 숫자가 들어있고, map을 통해서 인덱스를 곱한 새로운 배열을 만들어 냈습니다. 인덱스는 0부터 시작하니 [0, 2, 6, 12, 20]이라는 배열을 가지게 됩니다.renderProfile 함수 만들기map 메소드를 통해서 우리가 가져온 프로필들을 전달 받은 컴..
새로 추가된 배열 메소드인 mapmap은 배열을 변형합니다. 전체를 바꾸기도 하고, 조건에 따라서 부분만 바꾸기도 합니다. 반복문 등을 이용하지 않고도 간단하게 새로운 배열을 만들 수 있습니다. 얼마나 편리한 지 코드로 확인해볼까요? const num = [2, 4, 6, 8, 10]; const num1 = num.map(x => x+1); num이란 배열엔 짝수가 들어있습니다. 다 홀수가 들어있는 배열을 만들려면 어떻게 해야할까요? num 배열의 요소에 1씩을 더하면 홀수가 됩니다. map은 콜백함수를 받습니다. 콜백함수는 매개변수로 현재의 값, 현재 인덱스, 배열 전체를 받습니다. num1을 확인하면 [3, 5, 7, 9 ,11]이라는 배열이 들어있는 것을 볼 수 있습니다. map은 사본을 반환하며..