[REACT] 반복 ( 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>
  )
}