React 개발에서 흔히 볼 수 있는 배열 처리 시스템에 대한 방법map, Filter(React 기초 강좌 8)
12899 단어 ReactJavaScript
개시하다
이번에는 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 애플리케이션
배운 것을 활용해 간단한 리액트 애플리케이션을 만들어보자.
이번에는 임무 관리 도구다.
절차.
이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
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 애플리케이션
배운 것을 활용해 간단한 리액트 애플리케이션을 만들어보자.
이번에는 임무 관리 도구다.
절차.
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);
["1番目はAraki", "2番目はIbata", "3番目はFukutome", "4番目はWoods", "5番目はAlex", "6番目はTatsunami"]
다음은
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 애플리케이션
배운 것을 활용해 간단한 리액트 애플리케이션을 만들어보자.
이번에는 임무 관리 도구다.
절차.
tasks
진열의 대상(연상 배열에 키에 id와 title를 넣어 정의함)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
Tasks
를 렌더링할 때 전달tasks={tasks}
propsTasks
구성 요소의 정의 부분task
(이름은 무엇입니까)map
모든 요소 진입li
라벨을 생성하여 변수list
에 저장list
는 현재 ul
라벨로 포장하여 되돌아오는 구성 요소로 한다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"));
그게 다야.참고해주세요.참고 자료
Reference
이 문제에 관하여(React 개발에서 흔히 볼 수 있는 배열 처리 시스템에 대한 방법map, Filter(React 기초 강좌 8)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryosuketter/items/c11a58242fa1ad9c6e4c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)