[React] 컴포넌트 반복 Iteration

🔵 React

[React] 컴포넌트 반복 Iteration

HYEJU01 2024. 8. 28. 20:27

1. 컴포넌트 반복 Iteration

😺 리액트에서의 반복 Iteration 에 대해 알아보자 !!

📍 리액트에서의 반복

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

😺 배열과 관련된 map과 filter 메서드에 대해서 알아보자.

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

array.map(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 (
    	....
    )
}

📍 filter - 요소 개수만큼 반복하며 boolean으로 리턴된 결과를 사용해서 새로운 list를 만듬

(배열의 특정 조건에 맞는 요소들만 추출하여 새로운 배열을 만들 때 사용)

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

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

😺 map 의 콜백함수에 리턴값을 사용하는 방법도 있는데, 다양한 장점이 있다. !!

리턴 값을 사용하는 방법을 알아보도록하자!

📍 map 콜백함수의 리턴

map의 콜백함수의 리턴에 반복시킬 태그를 넣습니다.
리액트에서 key는 배열을 렌더링 시킬때 빠르게 변화를 감지하기 위해 사용하는 속성입니다.
key는 index대신 고유한 값을 넣어 주도록 권유 됩니다. (key를 넣지 않으면 props에러가 발생 됩니다.)

const IterationComponent = () => {

    const arr = [1,2,3,4,5];
    const newArr = arr.map((item, index) => {
	    return <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"]

📍 push 메서드와 전개 연산자

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

이외에도 합치는 방법은 다양하다!

[App.js]

import { Fragment } from "react";
import IterationComponent from "./component/IterationComponent";
import IterationComponent3 from "./component/IterationComponent3";
import IterationComponent4 from "./component/IterationComponent4";
import IterationComponentQ2 from "./component/IterationComponentQ2";


function App() {
  return (

    <Fragment>
      <IterationComponent />
      <IterationComponent3 />
      <IterationComponent4 />
      <IterationComponentQ2 />
    </Fragment>
  )

}

export default App;

[IterationComponent.js]

function IterationComponent() {

  const arr = [1,2,3,4,5];

  // const newArr = arr.map((value, index) => {
  //   return value * 10;
  // })

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

  // li 태그 리액트 elemet 반드시 고유한 key props 전달하도록 해야함
  const newArr = arr.map((value,index) => { 
    return <li style={{listStyle:'none'}} key={index}> 값 : {value} </li>
  } )



  console.log(newArr);

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

export default IterationComponent;

const arr = [1,2,3,4,5];

const newArr = arr.map((value, index) => {
    return value * 10;
})

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

  const newArr = arr.map((value,index) => { 
    return <li style={{listStyle:'none'}} key={index}> 값 : {value} </li>
  } )

리액트 element 반드시 고유한 key props 전달하도록 해야한다.

[IterationComponent2.js]

import { useState } from "react";

function IterationComponent3() {

  const data = [
    {id:1, topic:"hi"},
    {id:2, topic:"zz"},
  ];

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

  //input 태그 state 로 관리
  let [topic, setTopic] = useState('');

  
  // 버튼 클릭시에 input state 값을 배열에다가 추가하기
  
  let handleClick = () => {
    let obj = {id : list[list.length-1].id + 1, topic : topic };
    let newList = list.concat(obj);
    //console.log(newList);
    setList(newList); // 다시 그리게됨 state 업데이트 리렌더링
    setTopic('');
  }
  
  
  //더블클릭 이벤트
  
  let handleRemove = (id) => {

    // filter  해당값이 
    let newList = list.filter((value) => {
      return value.id !== id; //  리턴에 실린 값이 true 인 데이터만 필터링
    } )
    
    setList(newList);
  }
  
    // 리스트로 반복 처리 - 이벤트가 태그보다 위쪽에 위치해야함
    // 이벤트함수에 매개변수를 주고 싶으면 () => {실행시킬함수(매개값)}
    const newList = list.map( value => <li style={{color:'blue'}} 
                                            key={value.id} 
                                            onDoubleClick={()=>{handleRemove(value.id)}}>  {value.topic} </li>)
  return (
    <div>
      
      <h3> 간단한 할일 목록 만들기 </h3>

      <ul>
        {newList}
      </ul>

      <input type="text" value={topic} onChange={(e)=> setTopic(e.target.value)}/>
      <button type="button" onClick={handleClick}> 추가하기 </button>

    </div>

  ) 
}

export default IterationComponent3;

  const data = [
    {id:1, topic:"hi"},
    {id:2, topic:"zz"},
  ];

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

  //input 태그 state 로 관리
  let [topic, setTopic] = useState('');

 // 버튼 클릭시에 input state 값을 배열에다가 추가하기
  
  let handleClick = () => {
    let obj = {id : list[list.length-1].id + 1, topic : topic };
    let newList = list.concat(obj);
    //console.log(newList);
    setList(newList); // 다시 그리게됨 state 업데이트 리렌더링
    setTopic('');
  }

클릭시 배열에 값 추가

//더블클릭 이벤트
  let handleRemove = (id) => {

    // filter  해당값이 
    let newList = list.filter((value) => {
      return value.id !== id; //  리턴에 실린 값이 true 인 데이터만 필터링
    } )
    
    setList(newList);
  }

더블클릭 이벤트

// 리스트로 반복 처리 - 이벤트가 태그보다 위쪽에 위치해야함
    // 이벤트함수에 매개변수를 주고 싶으면 () => {실행시킬함수(매개값)}
    const newList = list.map( value => <li style={{color:'blue'}} 
                                            key={value.id} 
                                            onDoubleClick={()=>{handleRemove(value.id)}}>  {value.topic} </li>)

 <ul>
     {newList}
 </ul>

      <input type="text" value={topic} onChange={(e)=> setTopic(e.target.value)}/>
      <button type="button" onClick={handleClick}> 추가하기 </button>

[IterationComponent3.js]

import { useState } from "react";
//import img1 from '../img/img1.png';


/*
이미지를 가져오는 방법
1. 외부 서버에서 경로 참조 받기 (가장 일반적인 방법)

2. src밑으로 넣는경우 (img1 으로 하나의 이미지 참조가능)
import img1 from '../img/1.jpg'; 

3. public밑으로 넣는경우는 바로 참조할 수 있습니다.
*/

const IterationComponent4 = () => {

    //데이터 - public폴더밑에 예시로 사용하기 위해 넣습니다.
    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},
    ]
  
    let [img, setImg] = useState('');
    //부모에게 걸면 자식도 걸리는 특성을 이용해도 된다.
    //const [im,setIm] = useState('"/img/img1.png"')

    let handleClick = (e) => {
      console.log(e.target);
      console.log(e.target.src);
      // let obj = {id : list[list.length-1].id + 1, topic : topic };
      // let newList = list.concat(obj);
      // //console.log(newList);
      // setList(newList); // 다시 그리게됨 state 업데이트 리렌더링
      // setTopic('');
      setImg(e.target.src);
      // if (e.target.tagName != "IMG") return;
      // let img = e.target.src ;
      // setImg(img);
    }




    // 목록 출력  IMG 는 각 하나의 객체가 된다 !! 
    const newArr = arr.map((img, index) => {
      return <div key={index} >  <img src={img.src} onClick={handleClick} /> <p style={{color:'blue'}}> 상품 : {img.title} </p> <p> 가격 :{img.price}</p> </div> 
    } )

    return (
        <div>
            <hr/>
            <h3>이미지 데이터 반복해보기</h3>
            {/* <img src="https://raw.githubusercontent.com/yopy0817/data_example/master/img/img1.png" alt="봄" width="100" /> */}
            {/*   <img src={img1}> */}
            {/* <img src="/img/img1.png" /> */}
            <img src={img} width={'300px'}/>

            {/* 
            <div>
                <div>
                    <img src="/img/img1.png" width="100" />
                    <p>
                        제목
                    </p>
                    <p>
                        가격
                    </p>
                </div> 
            <div>
            */}

            {/* 3번 */}


            <div style={{display:'flex', textAlign:'center', fontWeight:'600'}}> 
               {newArr}
            </div>

        </div>
    )

}

export default IterationComponent4;

    //데이터 - public폴더밑에 예시로 사용하기 위해 넣습니다.
    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},
    ]

    let [img, setImg] = useState('');
    //부모에게 걸면 자식도 걸리는 특성을 이용해도 된다.
    //const [im,setIm] = useState('"/img/img1.png"')

    let handleClick = (e) => {
      console.log(e.target);
      console.log(e.target.src);
      // let obj = {id : list[list.length-1].id + 1, topic : topic };
      // let newList = list.concat(obj);
      // //console.log(newList);
      // setList(newList); // 다시 그리게됨 state 업데이트 리렌더링
      // setTopic('');
      setImg(e.target.src);
      // if (e.target.tagName != "IMG") return;
      // let img = e.target.src ;
      // setImg(img);
    }

클릭 이벤트 : 이미지 클릭시 메인 이미지 변경됨

    // 목록 출력  IMG 는 각 하나의 객체가 된다 !! 
    const newArr = arr.map((img, index) => {
      return <div key={index} >  <img src={img.src} onClick={handleClick} /> <p style={{color:'blue'}}> 상품 : {img.title} </p> <p> 가격 :{img.price}</p> </div> 
    } )

<img src="https://raw.githubusercontent.com/yopy0817/data_example/master/img/img1.png" alt="봄" width="100" />
<img src={img1}>
<img src="/img/img1.png" />

이미지 띄우기

        <div>
            <hr/>
            <h3>이미지 데이터 반복해보기</h3>

            <img src={img} width={'300px'}/>

            <div style={{display:'flex', textAlign:'center', fontWeight:'600'}}> 
               {newArr}
            </div>

        </div>

[IterationComponentQ2.js]

import { useState } from "react";

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

    //2 - 아래 데이터는 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);

    //3 - 셀렉트박스가 체인지되면 이벤트객체를 활용해서 선택된 값만 필터링해주세요.
    let handleChange = (e) => {
        //data에서 필터링
        let newList = data.filter( item => item.type === e.target.value );
        setList(newList);
    }
	//4- input값은 state로 관리합니다.
    //5 - 검색기능 - 원본 data에서 필터링으로 검색값을 찾아 state를 업데이트 합니다.
    const [input, setInput] = useState('');
    const handleClick = () => {

        let newList = data.filter( item => {
            let str = item.type.concat(item.teacher).toLowerCase(); //문자열 붙이기
            return str.includes(input); //포함되어 있으면 true
        });
        setList(newList); //state변경
    }

    return (
        <div>java
			<hr/>
            <h3>실습</h3>
            Search: <input type="text" value={input} onChange={ (e) => setInput(e.target.value) }/>
            <button onClick={handleClick} >검색</button>

            <br/>
            
			과목찾기:
            <select onChange={handleChange}>
                {
                    select.map( (item, index) => <option key={index}>{item}</option>)
                }
            </select>
            <ul>
                {
                    list.map( item => <li key={item.id}>{item.type}-{item.teacher}</li>)
                }
            </ul>
        </div>
    )
}

export default IterationComponentQ2;

저작자표시 비영리 변경금지

현재글[React] 컴포넌트 반복 Iteration

개발일지📝