반복 (Iteration)

📌

• 반복을 잘 사용하는게 react에서 코드를 줄일수 있는 중요한 방법이다.
• react에서 반복을 사용할때는 배열을 이용한다.
• map 함수는 배열에서 사용하는 함수이고 사용시 새로운 함수가 반환된다.

const number = [1,2,3,4,5]
const newNumbers = number.map(
(e) =>{
    console.log(e)
}) // (e)가 각각 요소가 되어 1 2 3 4 5 가 반환된다.
---
const numbers = [1,2,3,4,5]
numbers.map( (number, i)=>{
  console.log(i)  
}) // 0 1 2 3 4
---
const numbers = [1,2,3,4,5]
const newNumbers = numbers.map((number, i) =>{
  return number*number;
}); // [1, 4, 9, 16, 25] 

✏️ 배열을 수정해서 새로운 배열을 만드는게 map함수 이고, 그안에는 함수가 들어가서 배열의 안에있는 원본 요소를 수정할수 있다.

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람']

  return (
    <ul>
      {names.map((name, i) => (
        <li key={i}>이름: {name}</li>
      ))}
    </ul>
  )
} 
export default IterationSample

📌

• map함수로 출력할때는 map함수 가장 바깥쪽에 key값을 넣어줘야함. key값은 map함수 안에서 항상 고유해야함. key값이 고유한 값이 없다면 i 사용.
• 키값이 필요한 이유는 리액트가 재랜더링을 할때 변화된 부분만 랜더링을 하는데 키값을 보고 랜더링을 함. 그래서 고유하지 않은 키값을 넣으면 에러발생.

📙
1. input에 들어갈 값을 관리할 useState변수 선언
2. input이 바뀔때마다(onChange) set함수로 e.target.value를 useState 변수에 담기
3. names 배열에 input에 담긴 값을 추가

import { useState } from 'react'
const IterationSample = () => {
  const [names, setNames] = useState(['눈사람', '얼음', '눈', '바람'])
  const [text, setText] = useState('')
  const handleChange = (e) => {
    setText(e.target.value)
  }
  const handleClick = () => {
    if (!text) return
    const newNames = [...names, text]
    setNames(newNames)
    setText('')
  }
    return (
    <div>
      <input value={text} onChange={handleChange} />
      <button onClick={handleClick}>추가</button>
      <ul>
        {names.map((name, i) => (
          <li key={i}>이름: {name}</li> // map함수를 써서 출력
        ))}
      </ul>
    </div>
  )
}