Reactjs에서 컴포넌트 반복 처리

1. 컴포넌트반복
임광규
2020.ReactJS 1

2. map()함수를사용한반복처리
map()메서드는배열내의모든요소각각에대하여주어진함수를호출한결과를모아새로운
배열을반환합니다.
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
2020.ReactJS 2

3. 데이터배열을컴포넌트배열로변환하기
import React from 'react';
export default () => {
const captainPlanet = ['땅', '불', '바람', '물', '마음'] ;
return <div>
<ul>
{captainPlanet.map(s => <li>{s}</li>)}
</ul>
</div>
}
2020.ReactJS 3

4. key
크롬개발자도구의콘솔을열어보면위와같은오류가발생합니다.
리액트에서 key 는컴포넌트배열을랜더링할때어떤원소에변동이있었는지알아내려고사용합니
다.
특히유동적인데이터를다룰때는원소를새로생성하거나,제거,변경할경우
key 가없으면virtualDOM을비교하는과정에서리스트를순차적으로비교하면서변화를감지하
지만
key 가있다면이값을사용해서어떤변화가일어나는지더욱빠르게알아낼수있습니다.
2020.ReactJS 4

5. key설정
키값은중복되지않는값이어야합니다.
import React from 'react';
export default () => {
const captainPlanet = ['땅', '불', '바람', '물', '마음'] ;
return <div>
<ul>
{captainPlanet.map((s, i) => <li key={i}>{s}</li>)}
</ul>
</div>
}
index를key로사용하면배열이변경될때효율적으로리랜더링하지못합니다.
데이터에포함된키값을key로이용하는게가장좋습니다.
2020.ReactJS 5

6. 반복되는컴포넌트의수정/삭제처리시유의사항
배열을수정할때직접접근하여수정하는것이아니라filter(),concat()등의배열내장함수를
사용하여새로운배열을만든후이를새로운상태로설정해야합니다.
import React, {useState} from 'react';
export default () => {
const [captainPlanet, setCaptainPlanet] = useState([{id: 1, text: "땅"}, {id: 2, text: '불'}, {id: 3, text: '바람'}]);
const [nextId, setNextId] = useState(4);
const [inputText, setInputText] = useState("");
return (<div>
<input type="text" value={inputText} onChange={e=>setInputText(e.target.value)} />
<button onClick={e=>{
const nextCp =captainPlanet.concat({id: nextId, text: inputText});
setNextId(nextId+1);
setCaptainPlanet(nextCp);
setInputText('');
}}>등록</button>
<ul>
{captainPlanet.map((s) => <li key={s.id} onClick={e=>{
setCaptainPlanet(captainPlanet.filter(c => c.id !== s.id));
}}>{s.text}</li>)}
</ul>
</div>);
}
2020.ReactJS 6

7. 정리
컴포넌트배열을랜더링할때는key값설정에항상주의해야합니다.또key값은언제나유일해야
합니다.
만약key값이중복된다면랜더링과정에서오류가발생합니다.
상태안에서배열을변형할때는배열에직접접근하여수정하는것이아니라filter(),concat()등의
배열내장함수를사용하여새로운배열을만든후이를새로운상태로설정해야합니다.
2020.ReactJS 7