06. 컴포넌트 반복.md

map() 함수

arr.map(callback, [thisArg])



callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지

	- currentValue: 현재 처리하고 있는 요소

	- index: 현재 처리하고 있는 요소의 index 값

	- array: 현재 처리하고 있는 원본 배열

thisArg(선택항목): callback 함수 내부에서 사용할 this 레퍼런스

key

-> 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용함.

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정.

const articleList = articles.map(article => (

	<Article
	
		title = {article.title}
		
		writer = {article.writer}
		
		key = {article.id}
		
	/>
	
)



//고유번호가 없을 때

const IterationSample = () => {

	const names = ['A', 'B', 'C', 'D'];
	
	const namesList = names.map((name,index) => <li key = {index}>{name}</li>);
	
	return <ul>{namesList}</ul>;
	
}

동적 배열의 렌더링

1. 초기 상태 설정

   세 가지의 state (데이터 배열, 텍스트를 입력할 수 있는 input의 상태, 데이터 배열에서 새로운 항목을 추가할 때 사용할 고유 id를 위한 상태) 사용

const IterationSample = () => {
    const [names, setNames] = useState([
        {id: 1, text: 'A'},
        {id: 2, text: 'B'},
        {id: 3, text: 'C'},
        {id: 4, text: 'D'}
    ]);
    const [inputText, setInputText] = useState('');
    const [nextId, setNextId] = useState(5);

    const nameList = names.map(name => <li key = {name.id}>{name.text}</li>);
    return <ul>{nameList}</ul>;
}

2. 데이터 추가 기능 구현

   push함수를 사용하지 않고 concat을 사용하여 새로운 배열을 만듦. (불변성 유지로 리액트 컴포넌트의 성능을 최적화할 수 있음)

const IterationSample = () => {
    const [names, setNames] = useState([
        {id: 1, text: 'A'},
        {id: 2, text: 'B'},
        {id: 3, text: 'C'},
        {id: 4, text: 'D'}
    ]);
    const [inputText, setInputText] = useState('');
    const [nextId, setNextId] = useState(5);

    const onChange = e => setInputText(e.target.value);
    const onClick = () => {
        const nextNames = names.concat({
            id: nextId,
            text: inputText
        });
        setNextId(nextId + 1);
        setNames(nextNames);
        setInputText('');
    }

    const nameList = names.map(name => <li key = {name.id}>{name.text}</li>);
    return (
        <>
        <input value = {inputText} onChange = {onChange}/>
        <button onClick = {onClick}>추가</button>
        <ul>{nameList}</ul>
        </>
    )
}

3. 데이터 제거 기능

const IterationSample = () => {
    const [names, setNames] = useState([
        {id: 1, text: 'A'},
        {id: 2, text: 'B'},
        {id: 3, text: 'C'},
        {id: 4, text: 'D'}
    ]);
    const [inputText, setInputText] = useState('');
    const [nextId, setNextId] = useState(5);

    const onChange = e => setInputText(e.target.value);
    const onClick = () => {
        const nextNames = names.concat({
            id: nextId,
            text: inputText
        });
        setNextId(nextId + 1);
        setNames(nextNames);
        setInputText('');
    }
    const onRemove = id => {
        const nextNames = names.filter(name => name.id !== id);
        setNames(nextNames);
    }

    const namesList = names.map(name => (
        <li key = {name.id} onDoubleClick = {() => onRemove(name.id)}>
            {name.text}
            </li>
            ));
    return (
        <>
        <input value = {inputText} onChange = {onChange}/>
        <button onClick = {onClick}>추가</button>
        <ul>{namesList}</ul>
        </>
    )
}