map
함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.
callback
: 새로운 배열의 요소를 생성하는 함수thisArg
: (선택) callback 함수 내부에서 사용할 this 레퍼런스import React from 'react'
const IterationSample=()=>{
const names = ['눈사람','눈','사','람']
const nameList = names.map(name=><li >{name}</li>)
return (
<ul>{nameList}</ul>
)
}
export default IterationSample
key 설정을 안해주며 오류가 난다.
const nameList = names.map((name,index)=><li key={index}>{name}</li>)
map((name,index)=>
로 두가지를 들고 올 수 있다
<li key={index}>{name}</li>
key를 index를 넣어준다.
하지만! index로 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)
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}></input>
<button onClick={onClick}>추강</button>
<ul>{nameList}</ul>
</>
)
}
export default IterationSample
값이 변할 예정이니 state
에 names를 넣는다
input
을 사용할 것이면 <input value={inputText} onChange={onChange}></input>
const [inputText,setInputtext]=useState('');
등록해주기 const onChange = e => setInputtext(e.target.value)
<li>
만들기 const nameList = names.map(name=><li key={name.id}>{name.text}</li>)
<button onClick={onClick}>추강</button>
const onClick = () => {
const nextNames = names.concat({id:nextId, text:inputText})
`nextNames` = 원래names에 `{id,text}`추가해주겠다
`setNames(nextNames)` 전체 Names를 nextName로 바꿔주기
`setInputtext('')}` 인풋값 비워주기
`setNextId(nextId+1)` 다음 id에 1추가 해주기
const [nextId,setNextId] = useState(5)
const onRemove = id =>{
const nextNames = names.filter(name=>name.id !== id);
setNames(nextNames)
}
const nameList = names.map(name=>
<li key={name.id} onDoubleClick={()=>{onRemove(name.id)}}>
{name.text}
</li>)
onRemove
함수는 id 와 함께 넘어오는데
nextNames
= names 중 name의 id 가 넘어온 id 가 아닌거만 저장된다setNames
로 새값 `업데이트<li key={name.id} onDoubleClick={()=>{onRemove(name.id)}}>
onDoubleClick
하면 Remove
함수에 id를 들고간다.