1
let array = [2, 3, 4]
2

3
array.map(() => {
4
  console.log(1) // 1이 3번 출력
5
})

1
let array = [2, 3, 4]
2

3
array.map(Element => {
4
  console.log(Element) // 2, 3, 4
5
})

1
let array = [2, 3, 4]
2

3
let newArray = array.map(Element => {
4
  return Element * 10
5
})
6
console.log(newArray) // [20, 30, 40]

1
const numbers = [1, 2, 3, 4, 5]
2
const listItems = numbers.map(numbers => <li>{numbers}</li>)
3

4
// 전체 listItems 배열을 <ul> 요소 안에 삽입한 뒤 DOM에서 렌더링
5
const root = ReactDOM.createRoot(document.getElementById('root'))
6
root.render(<ul>{listItems}</ul>) // 1부터 5까지의 숫자로 이루어진 리스트

1
function NumberList(props) {
2
  const numbers = props.numbers
3
  const listItems = numbers.map(number => <li key={number.toString()}>{number}</li>)
4
  return <ul>{listItems}</ul>
5
}
6

7
const numbers = [1, 2, 3, 4, 5]
8

9
const root = ReactDOM.createRoot(document.getElementById('root'))
10
root.render(<NumberList numbers={numbers} />)

1
function ListItem(props) {
2
  // Correct! There is no need to specify the key here:
3
  return <li>{props.value}</li>
4
}
5

6
function NumberList(props) {
7
  const numbers = props.numbers
8
  const listItems = numbers.map(number => (
9
    // Correct! Key should be specified inside the array.
10
    <ListItem key={number.toString()} value={number} />
11
  ))
12
  return <ul>{listItems}</ul>
13
}
14

15
const numbers = [1, 2, 3, 4, 5]
16

17
const root = ReactDOM.createRoot(document.getElementById('root'))
18
root.render(<NumberList numbers={numbers} />)

1
function ListItem(props) {
2
  return <li>{props.value}</li>
3
}
4

5
function NumberList(props) {
6
  const numbers = props.numbers
7
  // 중광호를 이용해 map() 넣을 수 있음
8
  return (
9
    <ul>
10
      {numbers.map(number => (
11
        <ListItem key={number.toString()} value={number} />
12
      ))}
13
    </ul>
14
  )
15
}
16

17
const numbers = [1, 2, 3, 4, 5]
18

19
const root = ReactDOM.createRoot(document.getElementById('root'))
20
root.render(<NumberList numbers={numbers} />)

1
import { useState } from 'react'
2

3
export default function App() {
4
  const [inputValue, setInputValue] = useState('')
5
  const [list, setList] = useState(['밥먹기', '코딩하기'])
6

7
  const addTodoList = () => {
8
    setList(prevList => {
9
      return [inputValue, ...prevList]
10
    })
11
    setInputValue('')
12
  }
13

14
  return (
15
    <>
16
      <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
17
      <button onClick={addTodoList}>추가</button>
18
      <ul>
19
        {list.map(item => {
20
          return <li>{item}</li>
21
        })}
22
      </ul>
23
    </>
24
  )
25
}

1
export default function App() {
2
  // 생략
3
  return (
4
    <>
5
      <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
6
      <button onClick={addTodoList}>추가</button>
7
      <ul>
8
        {list.map(item => {
9
          // key값이 없으면 경고가 뜬다. key값은 고유한 값이어야 하고, index를 사용하면 안된다.
10
          // 이제 전체 항목을 업데이트하는 것이 아니라, 특정 key값의 항목만 추가한다.
11
          return <li key={item}>{item}</li>
12
        })}
13
      </ul>
14
    </>
15
  )
16
}

1
export default function App() {
2
  // 생략
3
  return (
4
    <>
5
      <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
6
      <button onClick={addTodoList}>추가</button>
7
      <ul>
8
        {list.map((item, index) => {
9
          // key값이 없으면 경고가 뜬다. key값은 고유한 값이어야 하고, index를 사용하면 안된다.
10
          // index는 안정적(고정적)이지 않기 때문에, 새 항목을 추가하면, index 순서가 추가한 만큼 밀림
11
          // 그래서 React는 key값이 고정적이지 않다고 판단해서, 새 항목을 추가하면, 전체 항목을 업데이트함
12
          return <li key={index}>{item}</li>
13
        })}
14
      </ul>
15
    </>
16
  )
17
}

1
import { useState } from 'react'
2

3
export default function App() {
4
  const [inputValue, setInputValue] = useState('')
5
  const [list, setList] = useState([
6
    {
7
      id: '1',
8
      value: '밥먹기',
9
    },
10
    {
11
      id: '2',
12
      value: '코딩하기',
13
    },
14
  ])
15

16
  const addTodoList = () => {
17
    setList(prevList => {
18
      return [
19
        {
20
          id: list.length + 1 + '',
21
          value: inputValue,
22
        },
23
        ...prevList,
24
      ]
25
    })
26
    setInputValue('')
27
  }
28

29
  return (
30
    <>
31
      <input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />
32
      <button onClick={addTodoList}>추가</button>
33
      <ul>
34
        {list.map(item => {
35
          return <li key={item.id}>{item.value}</li>
36
        })}
37
      </ul>
38
    </>
39
  )
40
}