리액트 | 컴포넌트 반복

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

 

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

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

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

 

예제 1)

 

IterationComponent.js

const IterationComponent = () =>{
    
    //1. 반복처리
    const arr = [1,2,3,4,5];
/*
    const newArr = arr.map(function(item,index,arr){
        return item*10;
    })
    console.log(newArr);
*/

    // const newArr = arr.map((item, index, arr) => item*10);

    //2. 반복처리(태그)
    //리액트에서 반복처리시에 key를 태그에 작성합니다. (key는 고유한 값입니다.)
    //key는 화면에서 랜더링할 때 변화를 감지하기 위해 참조하는 값입니다.
    const newArr = arr.map((item, index) => <li key={index}>{item}</li>);
    console.log(newArr);
    return (
            <>
                <ul>
                    {arr.map((item, index) => <li key={index}>{item}</li>)}
                </ul>
            </>
    )
}

export default IterationComponent;

 

예제 2) 인풋에 값을 넣어 추가하기 버튼을 누르면 list에 추가 / 더블클릭하면 해당 li 삭제

IterationComponent2.js

import { useState } from "react";

const IterationComponent2 = () => {


 

    //1.반복할 데이터 (state로 관리)
    const arr = [
        {id:1, topic: "hello"},
        {id:2, topic: "bye"},
        {id:3, topic: "see you"} 
    ];


    const [list, setlist] = useState(arr);

    //2.map함수를 이용해서 li태그로 생성
    const newList = list.map(item =>
        <li key={item.id} onDoubleClick={() =>  handleRemove(item.id)}> {/* 함수호출 */}
            {item.topic}
        </li>
    );

    //3.인풋데이터 관리
    const [data,setData] = useState('');
    const handleChange = (e) => {
        setData(e.target.value);
    }

    //4.추가하기 버튼 클릭시 input의 값을 list의 마지막에 추가
    const handleClick = () => {
       let obj = {id:list[list.length-1].id+1, topic:data};
    //    list.push(obj); //state를 직접 변경 x
       let newArr = list.concat(obj); //원본리스트를 수정하진 x 리스트에 obj에 합쳐진 새로운 리스트를 반환
       setlist(newArr); //state변경
       setData(''); //input값 초기화
    }

    //5.삭제하기
    //화살표 함수는 익명함수이기 때문에 호이스팅이 불가합니다.     
    //이벤트 안에서 함수를 호출로 연결하는 방법
    //onclick={ ()=>함수호출() }
    const handleRemove = (a) => {
        console.log(a);
        //filter - 콜백의 리턴이 true인 값을 가지고 새로운 배열생성
        // const ex = [1,2,3,4,5].filter ((item) => item !=3 );
        // console.log(ex);
        const newlist = list.filter((item) => item.id !== a);
        setlist(newlist);
        
        //id 필요
        
    }
        

  



    return(
        <>
            <h3>목록 추가하기</h3>
            <input type = "text" onChange={handleChange} value={data}/>
            <button type="button" onClick={handleClick} >추가하기</button>
            <ul>
                {newList}
            </ul>
        </>
    )
}

export default IterationComponent2;

 

 

예제 3) 이미지 반복해서 list에 넣기 / 선택한 이미지 출력하기

IterationComponentQ.js

/*

이미지를 가져오는 방법

1.외부 서버에서 경로를 참조받음 (가장 일반적인 방법)

2.src폴더 밑에 img 파일 참조가능 (선호하는 방법이 아님)
  이미지가 많아지면 쓰기 힘듦
  //import img1 from '../img/img1.png'

3.public폴더 밑에 넣는 경우 이미지를 바로 참조 가능
//http://localhost:3000/img/img1.png

*/

import { useState } from "react";

const IterationComponentQ = () => {

    const arr = [
        {src : '/img/img1.png', title : '아이폰10', price: 1000},
        {src : '/img/img2.png', title : '아이폰11', price: 2000},
        {src : '/img/img3.png', title : '아이폰12', price: 3000},
        {src : '/img/img4.png', title : '아이폰13', price: 4000},
    ];

    const [list, setList] = useState(arr);


    const [img, setImg] = useState('');
    
    const handleClick = (e) => {
        // console.log(newList);
        setImg(e.target.src);
    }


    const newList = list.map(item => 
        
            <div key = {item.title} onClick={handleClick}>
                <img src = {item.src} alt={item.title} width="100"/>
                <p>{item.title}</p>
                <p>{item.price}</p>
            </div>
        );

    


    return (
        <>
            <h3>이미지 데이터 반복하기</h3>
            {/*
            <img src="https://raw.githubusercontent.com/yopy0817/data_example/master/img/img1.png" alt="제목" width="100"/>
            <img src={img1} alt="제목" width="100"/>
            <img src="/img/img1.png" alt="제목" width="100"/>
            */}

            <div> {/*<img src={list}/>*/} <img src={img}/></div>

            <div style={{display : "flex", justifyContent:"space-around"}}>

            {/* 반복할 요소의 모형 */}
                {newList}
            </div>
        </>
    )
}

export default IterationComponentQ;

 

예제 4) selet한 언어 리스트만 출력 / 검색하면 해당글자를 포함한 리스트 출력 

 

IterationComponentQ2.js

import { useState } from "react";

const IterationComponentQ2 = () => {

    //1. select는 컴포넌트 반복으로 option태그 생성합니다.
    const select = ['HTML', 'Javascript', 'CSS', 'Java', 'Oracle', 'Mysql'];

    const opt = select.map(item => 
        <option key={item}>{item}</option>
    );
    
    //2. data는 state를 관리하고 화면에 li태그로 반복을 합니다.
    const data = [
        {id: 1, type: 'Java', teacher: '이순신'},
        {id: 2, type: 'Java', teacher: '홍길자'},
        {id: 3, type: 'Javascript', teacher: '홍길동'},
        {id: 4, type: 'Oracle', teacher: '이순신'},
        {id: 5, type: 'Mysql', teacher: '이순신'},
        {id: 6, type: 'CSS', teacher: '박찬호'},
        {id: 7, type: 'HTML', teacher: 'coding404'},
    ];

    const [list,setList] = useState(data);

    // const [list2,setList2] = useState(data);

    const li = list.map(item=>
            <li key = {item.id}>{item.type}-{item.teacher}</li>
        );

    // console.log(list);

    //3.select박스가 체인지되면, 이벤트 객체를 활용해서 선택된 값만 필터링해서 보여주면 됩니다.
    
    const handleChange = (e) => {
        const newList = data.filter((item) => item.type === e.target.value);
        setList(newList);    
    }

    //4.숙제 : 검색 기능 만들기
    //대소문자를 구분하지 않고 teacher, type에 포함된 데이터만 필터링

    // let search = '';
    const [search,setSearch] = useState('');

    const handleChange2 = (e) => {
        setSearch(e.target.value);
        
    }

    const handleEnter = (e) => {
        if(e.keyCode == 13) {
            handleSearch();
        };
    }

    const handleSearch = () => {

        const newList = data.filter((item)=>item.type.toLowerCase().includes(search.toLowerCase())||item.teacher.toLowerCase().includes(search.toLowerCase()));
        setList(newList);
        setSearch('');
    }
    

    return (
        <>
            <h3>컴포넌트 반복 실습</h3>

            <input type="text" onChange={handleChange2} onKeyUp={handleEnter} value={search}/>
            <button onClick={handleSearch}>검색</button> <br/>

            <select onChange={handleChange}>
                {opt}
            </select>

            <ul>
                {li}
            </ul>
        </>
    )
}

export default IterationComponentQ2;