6. 컴포넌트 반복

히치키치·2021년 11월 16일
0

React_Basic

목록 보기
5/8
post-thumbnail

JS 배열의 map() 함수

  • 반복되는 컴포넌트 랜더링 가능
  • map() : 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 프로세싱 한 후 그 결과로 기존 배열을 새로운 배열로 생성

문법

arr.map(callback,[thisArg])
  • callback : 새로운 배열 요소 생성하는 함수
  • currentValue : 현재 처리하고 있는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array : 현재 처리하고 있는 원본 배열
  • thisArg : callback 함수 내부에서 사용함 this 레퍼런스

예제

map 함수를 사용해 배열 [1,2,3,4,5] 각 요소를 제곱해 새로운 배열 생성

const number=[1,2,3,4,5]
const result=number.map(num=>num*num)
console.log(result)

데이터 배열을 컴포넌트 배열로 map하기

1. IterationSample 컴포넌트 생성

import React,{Component} from "react";

class IterationSample extends Component{
    render(){
        const names=["눈사람","얼음","눈","바람"];
        const nameList=names.map(
            (name)=>(<li>{name}</li>)
        );

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


}

export default IterationSample;

2. App 컴포넌트에서 IterationSample 컴포넌트 랜더링


import './App.css';
import React,{Component} from 'react';

import IterationSample from './IterationSample';

class App extends Component{
  render(){
    {

      return (
        <IterationSample/>
      );
    }
  }
}

export default App;

Key

  • 컴포넌트 배열 랜더링 시 어떤 원소에 변동 있었는지 알아내려고 사용

key 설정

  • map()의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정
  • 유일한 key 값
    (ex. 게시판의 경우, 게시물 번호)
import React,{Component} from "react";

class IterationSample extends Component{
    render(){
        const names=["눈사람","얼음","눈","바람"];
        const nameList=names.map(
            (name,index)=>(<li key={index}>{name}</li>)
        );

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


}

export default IterationSample;

응용

1. state에 초기 데이터 담기

컴포넌트 state에 기존 상수로 담은 배열 값 추가

    state={
        names:["눈사람","얼음","눈","바람"],
        name:""
    };

2. 데이터 추가 기능 구현

input : 기본값 공백, state에 저장
<div> 태그로 컴포넌트 위에 inputoutput 위치/랜더링
이벤트 핸들러 메서드를 inputbutton에 각각 설정
concat : 기존 배열 수정 X, 기존 배열+새 값인 새로운 배열 생성

import React,{Component} from "react";

class IterationSample extends Component{


    state={
        names:["눈사람","얼음","눈","바람"], //기존 상수로 담은 배열 값 추가
        name:"" //input 기본값 공백 
    };

    handleChange=(e)=>{
        this.setState({
            name:e.target.value
        });
    }

    handleInsert=()=>{
        
        this.setState({
            names:this.state.names.concat(this.state.name), 
            //names 배열에 값 추가
            name:"" 
            //name 값 초기화
        })
    };
    render(){
        const nameList=this.state.names.map(
        	(name,index)=>(<li key={index}>{name}</li>));

        return(
            <div> {/* div 태그로 input과 button 감쌈 -> 컴포넌트 위로 랜더링*/}
                <input 
                    onChange={this.handleChange} //이벤트 부여
                    value={this.state.name}/> 
                <button onClick={this.handleInsert} //이벤트 부여
                >추가</button>
                <ul>{nameList}</ul>
            </div> 
        )
    };
}

export default IterationSample;

3. 데이터 제거 기능 구현

아이템 두 번 클릭하면 제거하도록 기능 구현 onDoubleClick

import React,{Component} from "react";

class IterationSample extends Component{


    state={
        names:["눈사람","얼음","눈","바람"], //기존 상수로 담은 배열 값 추가
        name:"" //input 기본값 공백 
    };

    handleChange=(e)=>{
        this.setState({
            name:e.target.value
        });
    }

    handleInsert=()=>{
        
        this.setState({
            names:this.state.names.concat(this.state.name), //names 배열에 값 추가
            name:"" //name 값 초기화
        })
    };

    //더블클릭 이벤트 발생 : 삭제 함수
    handleRemove=(index)=>{
        const {names}=this.state;
        //names 레퍼런스 미리 만들기

        this.setState({
            names:[ //전개 연산자(...) 사용
                ...names.slice(0,index), //처음 ~ 삭제할 요소 전까지 복사
                ...names.slice(index+1,names.length) //삭제할 요소 다음 ~ 끝까지 복사
            ]
        });
    }
    render(){
        const nameList=this.state.names.map(
            (name,index)=>(
            <li 
                key={index} 
                onDoubleClick={()=>this.handleRemove(index)} 
                /*아이템 더블 클릭시 삭제 함수 실행됨 (클릭된 아이템 key 값인 index 전달)*/> 
                    {name}
            </li>));

        return(
            <div> {/* div 태그로 input과 button 감쌈 -> 컴포넌트 위로 랜더링*/}
                <input 
                    onChange={this.handleChange} //이벤트 부여
                    value={this.state.name}/> 
                <button onClick={this.handleInsert} //이벤트 부여
                >추가</button>
                <ul>{nameList}</ul>
            </div> 
        )
    };
}

export default IterationSample;

filer 사용한 handleRemove 함수

    handleRemove=(index)=>{
        const {names}=this.state;
        //names 레퍼런스 미리 만들기

        this.setState({
          //fiter로 index번째만 제외한 원소만 있는 배열 생성
            names:names.filter((item,i)=>i!==index)
        });
    }

0개의 댓글