[React] map, filter를 이용한 예제

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

map이란?

배열.map((현재 값) => 수행하고 싶은 일)

arr.map(callback, [thisArg])

callback(currentValue(현재 요소), index(현재 인덱스), array(원본 배열))

thisArg : callback 함수 내부에서 사용할 this 레퍼런스

 

map 기본 예제

import React, { useState } from "react";

const MyComponent = () => {
  const [names, setNames] = useState([
    { id: 1, text: '음악' },
    { id: 2, text: '코딩' },
    { id: 3, text: '운동' },
    { id: 4, text: '알고리즘' },
  ]);

  return (
    <ul>{names.map(name => <li>할 일 : {name.text}</li>)}</ul>
  )
}

export default MyComponent;

 

filter 란?

특정 조건을 만족하는 원소들만 쉽게 분류함.

 

filter 기본 예제

import React, { useState } from "react";

const MyComponent = () => {
  const [names, setNames] = useState([
    { id: 1, text: '음악' },
    { id: 2, text: '코딩' },
    { id: 3, text: '운동' },
    { id: 4, text: '알고리즘' },
  ]);

  const [input, setInput] = useState();

  const create = () => {
    let length = names.length;
    const NewNames = names.concat({
      id: length + 1,
      text: input,
    })
    setNames(NewNames);
    setInput('');
  }

  const remove = (id) => {
    const NewNames = names.filter(name => name.id !== id);
    setNames(NewNames);
  }

  const onChange = (e) => {
    setInput(e.target.value);
  }

  const nameList = names.map(name => <li key={name.id} onDoubleClick={() => remove(name.id)}>할 일 : {name.text}</li>)

  return (
    <div>
      <ul>{nameList}</ul>
      <input value={input} onChange={onChange}></input>
      <button onClick={create}>create</button>
    </div>
  )
}

export default MyComponent;

 

 

 

결론

클래스형 컴포넌트에서 임의 메소드를 써서 이벤트 핸들링을 하고 싶다면, 화살표 함수를 쓰자.

호출할 때는 {this.methodName} 과 같이 함수 형태의 값을 전달하면 된다.

 

 

---