[React] concat, map, filter 기초 예제

리액트 프로젝트가 이미 생성되어있다는 가정하에 진행

 

concat

기존 배열 토대로 변경한 새 배열이 반환된다. 기존 배열은 바뀌지않음.

 

map

약간 forEach 같은 느낌, 배열의 각각 요소에 대해서 조건에 따라 맞춰서 새로운 배열을 반환함

예 ) [1,2,3,4] 라는 배열 하나 있다치면, map( a => a * 10) ; 를 해줬을때 [10,20,30,40] 됨

 

filter

말그대로 필터링, 조건을 통과한 요소만 모아서 새로운 배열을 반환

---

IterationSample.js

import React, { useState } from 'react';

const IterationSample = () => {

    //데이터 설정
    const [names, setNames] = useState([
        { id: 1, text: '우아악' },
        { id: 2, text: '으악' },
        { id: 3, text: '끼악' },
        { id: 4, text: '꺄악' },
        { id: 5, text: 'aaaaa'} ,
    ]);
    
    
    const [inputText, setInputText] = useState(''); //변수 선언
    const [nextId, setNextId] = useState(8); // 위 배열 데이터의 다음 id 값, 8이면 5 다음 추가시 8부터 시작

    const setValue = e => setInputText(e.target.value); //input value 가져오기

    const submit = () => { //버튼 추가시 실행되는 submit 함수
        const nextData = names.concat({
            id: nextId,
            text: inputText
        });
        setNextId(nextId + 1);
        setNames(nextData);
        setInputText('');
    }

    const deleteData = id => { //더블클릭시 해당 data 제외한 filter 실행 후 배열 재출력
        const nextData = names.filter(name => name.id !== id);
        //console.log(nextData);
        setNames(nextData);
    }

    //목록 데이터 뿌려주는 map
    const nameList = names.map((name) => <li key={name.id} onDoubleClick={()=>deleteData(name.id)}>{name.text}</li>);

    //렌더링
    return (
        <>
            <input value={inputText} onChange={setValue} />
            <button onClick={submit}>추가</button>
            <ul>{nameList}</ul>
        </>
    );
    

}

export default IterationSample;

 

App.js

import React, {Component} from 'react';
import IterationSample from './components/IterationSample';


class App extends Component {
  render() { 
    return (          
      <IterationSample/>    
    );
  }
}

export default App;

 

 

실행화면

첫 실행화면

구글 F12 React Components 확인 창

새 데이터를 입력하면 id 가 8부터 들어간걸 확인 할 수 있다.

 

 

/*
그외 리액트랑은 관련없지만 jQuery map, filter 메모겸 예제 추가

예를들어
list 라는 id 를 가진 element 안에, listCheck 이라는 클래스를 가진 체크 박스들중
체크된 애들의 value 를 가져오고싶으면 아래처럼 가져오게 된다.
*/

let checkedValue = $('#list .listCheck:checked').map((_,el) => el.value).get();

/*
그리고 체크해서 가져온 애들중에 3개만 놔두고 나머진 다 버리고싶다 하면 filter 사용
*/
if(checkedValue.length > 3){
    alert('등록은 최대 3개까지만 가능');
    checkedValue = checkedValue.filter(function(data,index) {
        return index < 3;			
    });
}