map ( )

map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.

• map 함수는 배열 내 각 요소를 규칙에 따라 변환한 후 새로운 배열을 생성

arr.map(callback,[thisArg])

• 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)
  
• id 와 text 값 사용해서 <li> 만들기 const nameList = names.map(name=><li key={name.id}>{name.text}</li>)
  
• button 을 누르면 state에 새 값이 생긴다 <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추가 해주기

• 새 값 추가 하면 id도 늘어나야한다. → id값 만들기 const [nextId,setNextId] = useState(5)
  

concat

• push 함수: 기존 배열 자체를 변경 concat 은 새로운 배열을 만들어 준다. → 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다.
  

제거 기능

데이터 불변성을 유지해야 하기 때문에 filter를 사용해야한다.

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를 들고간다.