5. 컴포넌트 반복

1. 목록 요소들을 반복처리 할때는 map함수를 이용 합니다.
2. 반복 컴포넌트에는 반드시 key props를 전달해야 합니다.

 

map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용

array.map(callbackFunction(currenValue, index, array), thisArg) 

• currenValue: 현재값
• index: 현재인덱스
• arrayt: 현재배열,
• thisArg: callbackFunction 내에서 this로 사용될 값

 

filter - 요소개수만큼 반복하며 boolean을 이용한 새로운 list를 만듬

array.filter(callbackFunction(currenValue, index, array), thisArg) 

• currenValue: 현재값
• index: 현재인덱스
• arrayt: 현재배열,
• thisArg: callbackFunction 내에서 this로 사용될 값

const IterationComponent = () => {

    const arr = [1,2,3,4,5];
    const newArr = arr.map( item => item*10 ) // => 한줄일 경우 리턴

    console.log('map으로 생롭게 만들어진 newArr', newArr)
	
    return (
    	....
    )
}

---

map의 콜백함수의 리턴에 반복시킬 태그를 넣습니다.

리액트에서 key는 배열을 렌더링 시킬때 빠르게 변화를 감지하기 위해 사용하는 속성입니다.

key는 index대신 고유한 값을 넣어 주도록 권유 됩니다. (key를 넣지 않으면 props에러가 발생 됩니다.)

const IterationComponent = () => {

    const arr = [1,2,3,4,5];
    const newArr = arr.map((item, index) => <li key={index}>{item}</li>)

    return (
        <ul>
            {newArr}
        </ul>
    )
}

export default IterationComponent;

---

 

반복할 요소를 state에 넣고 처리하기

버튼 클릭시 인풋state의 값을 목록state에 추가하기

1. 반복처리할 state선언
2. input state, 인풋 핸들러선언
3. 버튼 클릭시 input state의 값을 목록state에 추가

import { useState } from "react";


const IterationComponent2 = () => {

    //1. 반복처리할 데이터 state
    const data = [{id:1, topic: 'hello'},
                  {id:2, topic: 'bye'} 
                 ];
    const [list, setList] = useState(data)
    const newData = list.map( item => <li key={item.id}>{item.topic}</li> )

    //2.인풋핸들러추가
    const [inputData, setInputData] = useState('')
    const handleChange = e => {
        setInputData(e.target.value) //input데이터 state로 관리
    }

    //3. 데이터 추가시 input의 값으로 1번 데이터 수정
    const handleClick = e => {
        let obj = {id: list[list.length-1].id + 1 , topic: inputData} //추가할데이터(마지막요소의 id+1, 인풋데이터)
        let newList = list.concat(obj) //state와 추가할 데이터 합치기(배열합치기)
        setList(newList); //state업데이트
        setInputData(''); //input값 비우기
    }

    return (
        <div>
            <hr/>
            <input type="text" onChange={handleChange} value={inputData}/>
            <button onClick={handleClick}>추가하기</button>
            <ul>
                {newData}
            </ul>
        </div>
    )

}

export default IterationComponent2;