map()

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..

var numbers = [3, 56, 2, 48, 5]; 위와 같은 숫자를 가지고 있는 배열이 있다. 배열의 각 요소를 두배(X2) 해주려면 어떻게 해야 할까? 기존의 자바스크립트로는 forEach를 사용해서 문제를 해결할 수 있다. //forEach var newNumbers = []; function double(x) { newNumbers.push(x * 2); } numbers.forEach(double); newNumbers라는 비어있는 배열을 만들어주었다. 이곳에 x2 되는 숫자들이 들어간다. 그리고 double이라는 함수를 만들어서 두배 만들기 기능을 수행하게 했다. 마지막으로 forEach에 double함수를 넣어 numbers의 모든 요소를 x2 해주었다. 그리고 아래와 같은 결과 나왔..