map
[React] map()에 key를 사용하는 이유 (index를 key로 쓰면 안되는 이유)
Warning: Each child in a list should have a unique "key" prop 우리가 자주 보는 이 경고는 리액트에서 map()에 key 속성을 부여하지 않았을 때 발생합니다. 이 글을 통해 map에 키가 필요한 이유와 index를 키로 쓰면 안되는 이유를 알아보겠습니다. (Robin Pokorny의 Index as a key is an anti-pattern을 읽어보시는 것도 추천합니다.) 키가 필요한 이유 first second first second third 위의 코드처럼 자식의 맨 끝에 엘리먼트를 추가하는 과정은 크게 문제 되지 않습니다. 리액트는 기존 트리와 이후 트리가 일치하는 것을 확인하고 third를 트리에 추가하기 때문입니다. first second th..
[JavaScript] 배열 메서드 종류 (filter, forEach, map, reduce, sort)
Array methods JavaScript에는 배열을 다루는 여러 가지 유용한 메서드들이 많다. 자주 쓰이는 문법들이기도 하니까 한번쯤 정리할 필요성을 느꼈다. 1. Array.prototype.filter() 배열 요소들 중 콜백 함수의 조건을 만족하는 요소들만 모아 새로운 배열을 생성한다. callback 함수는 결과값이 true면 요소를 유지하고 false면 버린다. 필터링된 새로운 배열을 반환한다. 필터링된 요소가 없다면 빈 배열을 반환한다. 선언 arr.filter(callback(element, [index], [array]) { ... }, [thisArg]) // element: 처리할 현재 요소 // index: 처리할 현재 요소의 인덱스 [Optional] // array: filte..