More Related Content
More from Daniel Lim (20)
6.component repeat
- 3. 데이터배열을컴포넌트배열로변환하기
import React from 'react';
export default () => {
const captainPlanet = ['땅', '불', '바람', '물', '마음'] ;
return <div>
<ul>
{captainPlanet.map(s => <li>{s}</li>)}
</ul>
</div>
}
2020.ReactJS 3
- 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