map()

맵 함수는 기존 배열로 새로운 배열을 만드는 역할을 합니다.
그래서 배열에 데이터가 있을 때, tag 랑 합쳐 새로운 스트링 배열로 만드는 경우 많이 사용됩니다.

const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map(name => <li>{name}</li>);

이런걸 컴포넌트 배열이라고 하는것 같은데.. 여기에는 key 값이 있어야합니다.

const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = name.map((name, index) => <li key={index}>{name}<li>);

key가 없으면, 새로운 값이 추가되거나 삭제되었을대, virtualDOM에서 순차적으로 앞에서 부터 비교하면서 차이를 밝견하지만, key가 있으면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 찾아낼수 있습니다.

불변성 유지

import React, {useState} from 'react';

const IterationSample = () => {
	const [names, setNames] = useState([
    	{ id: 1, text: '눈사람'},
        { id: 2, text: '얼음'},
        { id: 3, text: '눈'},
        { id: 4, text: '바람'},
   ]);
   
   const [inputText, setInputText] = useState('');
   const [nextId, setNextId] = useState(5); //새로운 항복을 추가할 때 사용할 id
   
   const onChange = e => setInputText(e.target.value);
   const onClick = () => {
   const NextNames = names.concat({
   	id: nextId,
    text: inputText,
   });
   setNextId(nextId + 1);
   setNames(nextNames);
   setInputText('');
}

여기서 자세히 보면 신기한게 상태를 수정하지 않는다. (배열이거나 객체일때)
push 함수를 사용하지 않고 concat을 사용한다.
리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다.
이를 불변성 유지라고 하는데요. 불변성 유지를 해줘야 나중에 리액트 컴포넌트의 성능을 최적화 수 있습니다.

filter

filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류할 수 있습니다.
제거/삭제 할대 많이 사용합니다.