개시하다

이번에는 React 개발에서 흔히 볼 수 있는 배열 처리 시스템의 방법map과 filter에 대해 알아보고 싶습니다.

시리즈

이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
State를 사용한 React 구성 요소 개발 응용프로그램(React 기반 워크숍 7) - Qita
첫 문장은 다음과 같다.
JSX의 내용을 React로 렌더링(create-react-app)(React 기초 강좌 1)-Qita

map

map는 수조 내의 요소를 호출 처리(가공)로 배열return하는 방법이다.
실제로 사용해 보세요.

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

const dragons_2006_members = members.map((output, index) => {
  return `${index + 1}番目は${output}`;
});

console.log(dragons_2006_members);

map의 첫 번째 매개 변수output는 수조members에서 정의한 내용이다.
두 번째 매개 변수index는 수조members의 각 요소의 인덱스 번호이다.
console

["1番目はAraki", "2番目はIbata", "3番目はFukutome", "4番目はWoods", "5番目はAlex", "6番目はTatsunami"]

각 배열에 접근하여 처리(가공)를 하여 새로운 배열을 만듭니다.

filter

다음은 filter입니다.filter는 그 중에서 정의조건TRUE의 요소와 배열return하는 방법뿐이다.
실제로 사용해 보세요.

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

const filter_include_a = members.filter((output, index) => {
  return output.includes("a");
});

console.log(filter_include_a);

["Araki", "Ibata", "Tatsunami"]
0: "Araki"
1: "Ibata"
2: "Tatsunami"

각 배열에 접근하여 처리(가공), 제작TRUE 요소(문자열, 소문자'a'포함 요소)의 새로운 배열.

맵, Filter를 사용한 React 애플리케이션

배운 것을 활용해 간단한 리액트 애플리케이션을 만들어보자.
이번에는 임무 관리 도구다.
절차.

consttasks진열의 대상(연상 배열에 키에 id와 title를 넣어 정의함)

특정 id를 지우는 데 사용되는 변수 정의deleteTaskId

쓰기 사용filter 방법은 위에서 정의한 변수의 처리를 제거한다

대충 이런 느낌.실제로 써보세요.

const tasks = [
  { id: 1, title: "one" },
  { id: 2, title: "two" },
  { id: 3, title: "three" },
  { id: 4, title: "four" },
  { id: 5, title: "five" }
];

const deleteTaskId = 1;

const deleteTasks = tasks.filter(task => {
  return task.id !== deleteTaskId;
});

console.log(deleteTasks);

변수deleteTaskId = 1 이외의 console는 수조로 토출된다.

[Object, Object, Object, Object]
　0: Object
　　id: 2
　　title: "two"
　1: Object
　　id: 3
　　title: "three"
　2: Object
　　id: 4
　　title: "four"
　3: Object
　　id: 5
　　title: "five"

이어서 우리는 상기 처리를 이용하여 task를 구성 요소로 하는 React 응용 프로그램을 제작하여 임무 관리 응용 프로그램이 되도록 할 것이다.
구체적으로 말하면 map로 배열을 만들고 그것을 reactElement로 삼아 그 구성 요소를 재현하는 처리를 쓴다.
단계는 다음과 같습니다.

스토리지 직접 사용tasks

React 구성 요소Tasks를 렌더링할 때 전달tasks={tasks}props

로

Tasks 구성 요소의 정의 부분

우선 매개 변수로 수신task(이름은 무엇입니까)

task가 여러 개 있기 때문에map 모든 요소 진입li 라벨을 생성하여 변수list에 저장

변수list는 현재 ul 라벨로 포장하여 되돌아오는 구성 요소로 한다

render 방법Tasks으로 구성 요소를 재현하여 다음과 같이view로 토출되면 OK

조금 어렵지만 앞서 설명한 내용의 축적이기도 하니 무엇보다 먼저 아무것도 보지 마세요.
나는 이렇게 이루어졌다.
index.js

import React from "react";
import { render } from "react-dom";

const tasks = [
  { id: 1, title: "one" },
  { id: 2, title: "two" },
  { id: 3, title: "three" },
  { id: 4, title: "four" },
  { id: 5, title: "five" }
];

const Tasks = ({ tasks }) => {
  const list = tasks.map(task => {
    return (
      <li>
        id is {task.id}, title is "{task.title}"
      </li>
    );
  });
  return <ul>{list}</ul>;
};

render(<Tasks tasks={tasks} />, document.getElementById("root"));

그게 다야.참고해주세요.

참고 자료

개정 새 JavaScript 정식 입문 ~ 현대적인 스타일을 바탕으로 현장에서의 응용 | 산전상관