React 개발에서 흔히 볼 수 있는 배열 처리 시스템에 대한 방법map, Filter(React 기초 강좌 8)

12899 단어 ReactJavaScript

개시하다


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

시리즈


이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
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 정식 입문 ~ 현대적인 스타일을 바탕으로 현장에서의 응용 | 산전상관
  • 좋은 웹페이지 즐겨찾기