[REACT] 컴포넌트 반복

 

[REACT] React Event

 

---

컴포넌트 반복

1. 목록 요소들을 반복처리 할 때는 MAP함수를 이용한다.
2. 반복 컴포넌트에는 반드시 Key Props를 전달해야 한다.

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

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

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

---

※ filter - 요소 개수 만큼 반복하며 boolean으로 리턴된 결과를 사용해 새로운 List를 만든다.

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

• currenValue : 현재 값
• index : 현재 인덱스
• array : 현재 배열
• 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={고유한식별값}>{item}</li>)

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

export default IterationComponent;

---

배열 합치기 방법

concat

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); //["a", "b", "c", "d", "e", "f"]

전개 구문

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const array3 = [...array1, ...array2];
console.log(array3); //["a", "b", "c", "d", "e", "f"]

---

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

▶ 버튼 클릭시 Input State의 값을 목록 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;