4전 4전

리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다. | map() map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다. 아래와 같은 데이터가 있다고 하면 const items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]; 위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면 { itmes.map((v, i) => { return {item.name} }) } 이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다. | filter() filter()를 사용하..

Map, Set은 자바스크립트에서 데이터를 저장하는 데 사용하는 구조입니다. | Map Map은 키와 값을 저장하는 객체입니다. 1. 생성 const map1 = new Map(); 이러면 map1을 변수로 하는 Map객체가 생성이 됩니다. 2. 사용 Map객체의 set() 메서드를 사용해 새로운 키-값을 추가하고, get() 메서드를 사용해 값을 검색할 수 있습니다. const map1 = new Map(); map1.set('key1', 'value1'); map1.set('key2', 'value2'); console.log(map1.get('key2')); // "value2" 출력 그리고 Map객체를 생성할 때 배열을 전달해 초기 키-값을 설정할 수도 있습니다. const map1 = new M..

map() 함수는 기존 배열의 각 요소에 함수를 적용하여 새로운 배열로 변환해 주는 함수입니다. | 구조 1. 구조 map() 함수의 구조는 다음과 같습니다. array.map((currentValue, index, array)=>{}); currentValue: 현재 처리 중인 요소의 값 index: 현재 처리 중인 요소의 값 array : 현재 배열 이런 식으로 콜백함수로 최대 3개의 인수를 가질 수 있고, 이중에 index와 array는 필수가 아니고 선택 요소입니다. 2. 예시 let arr = [1, 2, 3, 4]; let arr2 = arr.map((number)=> number * 2) console.log(arr2) // [2, 4, 6, 8] 출력 위 예제에서처럼 배열을 만들고 map(..