ReactJS component repeat
임광규
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]
데이터 배열을 컴포넌트 배열로 변환하기
import React from 'react';
export default () => {
const captainPlanet = ['땅', '불', '바람', '물', '마음'] ;
return <div>
<ul>
{captainPlanet.map(s => <li>{s}</li>)}
</ul>
</div>
}
key
크롬 개발자 도구의 콘솔을 열어보면 위와 같은 오류가 발생합니다.
리액트에서 key는 컴포넌트 배열을 랜더링 할때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.
특히 유동적인 데이터를 다룰 때는 원소를 새로 생성하거나, 제거, 변경할 경우
key 가 없으면 virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지하지만 key가 있다면 이 값을 사용해서 어떤 변화가 일어나는지 더욱 빠르게 알아낼수 있습니다.
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로 이용하는게 가장 좋습니다.
반복되는 컴포넌트의 수정/삭제 처리시 유의 사항
배열을 수정할때 직접 접근하여 수정하는 것이 아니라 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>);
}
정리
컴포넌트 배열을 랜더링 할 때는 key 값 설정에 항상 주의 해야 합니다. 또 key 값은 언제나 유일해야 합니다. 만약 key 값이 중복된다면 랜더링 과정에서 오류가 발생합니다.
상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 filter(), concat() 등의 배열 내장함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정 해야 합니다.