map과 filter 모두 배열의 반복문으로 사용하는 내장함수 이기 때문에 배열과 함께 사용해야 합니다.
Map
map은 배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋습니다.
예를 들어, const 친구 = ["철수" , "영희", "훈이" ] 가 있을 경우, 모두 앞에 '김' 이라는 성을 붙여주고 싶습니다. 이때 map을 통해 더욱 쉽게 구현이 가능합니다.
const 친구 = ["철수","영희","훈이"]
친구.map((el)=>("김"+el))
=> (3)["김철수","김영희","김훈이"] 이렇게 됩니다.map 안에서 사용된 el은 친구의 원소들이 들어갈 파라미터(매개변수) 입니다. 때문에 이름은 마음대로 변경해도 무방합니다.
일반 적인 배열이 아닌 객체가 원소인 배열에서도 map을 이용해 객체를 가공할 수 있습니다.
const 친구 = [
{name: "철수"},
{name: "영희"},
{name: "훈이"}]
//item.name => "철수","영희","훈이"
//school 속성을 일괄적으로 추가해주도록 하겠습니다.
친구.map((el)=>({name : "김" + el.name, school : "떡잎유치원"}))
=> (3)[
{name : "김철수",school : "떡잎유치원"},
{name : "김영희",school : "떡잎유치원"},
{name : "김훈이",school : "떡잎유치원"}
]위와 같이 나타나게 됩니다.
html 코드에서 map 사용하기
실제 프로젝트에서는 컴포넌트의 return 값안에서 map을 사용하는 경우가 많습니다.
map을 리턴값 안에서 사용하기 위해 {}로 감싸서 사용합니다. (return 안에 자바스크립트를 가지고 오기 위해서)
// RenderMap 컴포넌트
const RenderMap = ()=>{
const 친구 = ["철수","영희","훈이"]
return(
//중괄호를 이용해 자바스크립트를 컴포넌트의 return값 안으로 데리고 들어온 것 입니다.
//리턴되어야 할 값이 한줄이기때문에 괄호생략이 가능합니다.
{친구.map((el)=> <div>{el}어린이</div> )}
)
}
export default RenderMap위와 같은 코드를 실행하면 div 태그로 감싸진 친구의 원소들이 각각 출력되게 됩니다.
filter
filter는 이름 그대로 배열의 원소를 필터링 해주는 메서드 입니다.
filter는 필터링 할 조건으로 객체 혹은 배열의 각원소를 검사하여 그 조건에 맞는 원소들만 결과값으로 도출해 줍니다.
const num = [1,2,3,4,5,6,7,8,9,10]
num.filter((el)=>(el<=8))
=> (8) [1, 2, 3, 4, 5, 6, 7, 8]filter 안에서 사용되는 item 역시 배열의 원소가 들어갈 파라미터 입니다.
map, filter의 차이점
map은 배열의 모든 원소의 값을 다 변경해주지만, filter은 조건에 따라 해당하는 값만 변경됩니다.
react에서 map의 index를 key로 사용시 발생하는 문제점
import { Test } from '../../src/test2';
export default function Test2() {
const List = ['사과', '딸기', '바나나'];
return (
<>
{List.map((data) => (
<Test>{data}</Test>
))}
</>
);
}위의 코드를 실행하면 'Each child in a list should have a unique "key" prop' 라는 오류가 발생하게 됩니다. 즉 unique한 key를 부여하지 않았다고 오류가 나게 됩니다.
Index를 Key로 줘도 괜찮은 상황
해당 경고는 React가 어떤 요소를 변경, 추가, 삭제할지 식별하기 위함입니다.
react의 특징으로 가상 DOM과 DOM을 비교해서 바뀐 부분만 화면에 그려주게 됩니다.
하지만 key가 없는 경우에는 가상 DOM을 비교하는 과정에서 순차적으로 비교하며 변화를 감지합니다.
여기서 비교할 때 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하여 불필요한 비교나 렌더링을 없애줍니다.
그러기 위해 key는 안정적인 고유성을 부여하기 위해 중복되는 값이 아닌 것으로 지정해줘야 합니다.
(만약 key를 지정하지 않을 경우 자동으로 index를 키로 사용합니다. 하지만 이는 좋은 방법이 아니라 경고가 뜹니다.)
그래서 고유값과 같은 uuid와 같이 값을 key로 일반적으로 많이 줍니다
index를 key로 줘도 괜찮은 상황이 있습니다. 아래 3가지 조건을 만족하면 됩니다.
- 정적인 데이터. 계산되지 않고 변경되지 않는 데이터
- map에 있는 모든 데이터에 id가 없을 경우
- 데이터가 재정렬되거나 필터링 되지 않는 경우. (계속 그 자리 그대로)
위의 3가지를 만족한다면 index를 key로 사용해도 안전합니다.
