[리액트를 다루는 기술] 6장 컴포넌트 반복

map()

을 활용하여 반복되는 컴포넌트를 렌더링할 수 있다.
arr.map(callback, [thisArg])

• callback
  - currentValue: 현재 처리하고 있는 요소
  - index: 현재 처리하고 있는 index값
  • array: 현재 처리하고 있는 배열
• thisArg: callback 함수에서 사용할 this

key

key 값을 설정할 때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.

기존

return (
	<ul>
    	<li>눈사람</li>
        <li>얼음</li>
        <li>눈</li>
        <li>바람</li>
)

map, key 적용

• 배열이 변경될 때 효율적인 리렌더링을 위해 고유한 값이 없을 때만 index값을 key로 사용해야한다.
• push 대신 concat을 사용하면 새로운 배열을 만들어준다.
• filter를 사용하면 특정 배열에서 특정 원소만 제외시킬 수 있다.

import React, {useState} from 'react'

const InterationSample = () => {
    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) // 새로운 항목을 추가할 때 사용할 id

    const onChange = e => setInputText(e.target.value)

    const onClick = () => {
        const nextNames = names.concat({ // push 대신 concat을 사용하면 새로운 배열을 만들어준다.
            id: nextId, // nextId 값을 id로 설정하고
            text: inputText
        })

        setNextId(nextId+1) // nextId 값에 1을 더해준다
        setNames(nextNames) // names 값을 업데이트한다
        setInputText('') // inputText를 비운다
    }

    const onRemove = id => {
        const nextNames = names.filter(name => name.id !== id) // filter를 사용하면 특정 배열에서 특정 원소만 제외시킬 수 있다.
        setNames(nextNames)
    }

    const namesList = names.map(name => 
        <li key={name.id} onDoubleClick={() => onRemove(name.id)}>{name.text}</li>
    )

    return (
        <>
        <input value={inputText} onChange={onChange} />
        <button onClick={onClick}>추가</button>
        <ul>{namesList}</ul>
        </>
    )
}

export default InterationSample