map๊ณผ filter
map๊ณผ filter๋ ๋๋ค ๋ฐฐ์ด์ ๋ค๋ฃฐ ๋ ์์ฃผ ์ฌ์ฉํ๋ ๋ฉ์๋๋ค.
map() : ๋ฐฐ์ด ๋ด์ ๋ชจ๋ ์์ ๊ฐ๊ฐ์ ๋ํด ์ฃผ์ด์ง ์ฝ๋ฐฑ์ ํธ์ถํ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํ
filter() : ๋ฐฐ์ด์ ๊ฐ๊ฐ์ ์์์ ๋ํด ์ฝ๋ฐฑ์ ํธ์ถํ ๊ฒฐ๊ณผ, true๋ฅผ ๋ฐํํ๋ (์กฐ๊ฑด์ ๋ง์กฑํ๋) ๋ชจ๋ ์์๋ฅผ ๋ชจ์ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํ
๋๋ค ์๋ณธ ๋ฐฐ์ด์ ๋ณ๊ฒฝํ์ง ์๋๋ค.
์์๋ก ์ผ๋จ ๋ค์๊ณผ ๊ฐ์ด ํธ์์ด์ค์ ๋ฉค๋ฒ๋ค์ ์ ๋ณด๊ฐ ๋ด๊ฒจ์๋ ๋ฐฐ์ด์ ํ๋ ๋ง๋ค์๋ค.
const twice = [
{ name: "๋์ฐ", birth: 1995, country: "ํ๊ตญ" },
{ name: "์ ์ฐ", birth: 1996, country: "ํ๊ตญ" },
{ name: "๋ชจ๋ชจ", birth: 1996, country: "์ผ๋ณธ" },
{ name: "์ฌ๋", birth: 1996, country: "์ผ๋ณธ" },
{ name: "์งํจ", birth: 1997, country: "ํ๊ตญ" },
{ name: "๋ฏธ๋", birth: 1997, country: "์ผ๋ณธ" },
{ name: "๋คํ", birth: 1998, country: "ํ๊ตญ" },
{ name: "์ฑ์", birth: 1999, country: "ํ๊ตญ" },
{ name: "์ฏ์", birth: 1999, country: "๋๋ง" },
];
1) ๋ฉค๋ฒ๋ค์ ์ด๋ฆ๋ง ๋ด๊ฒจ์๋ ๋ฐฐ์ด์ ๋ง๋ค๊ธฐ
// ํธ์์ด์ค ๋ฉค๋ฒ์ ์ด๋ฆ๋ง ๋ด๊ฒจ์๋ ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// map ์ฌ์ฉ
// ํ์ดํ ํจ์๋ ์ค๊ดํธ๋ฅผ ์๋ตํ๋ฉด ๋ฐ๋ก returnํ๋ค๋ ๋ป์ด๋ฏ๋ก return ํค์๋๋ ์๋ตํ๋ค.
// twice.map((member)=>{return twice.name})
console.log(twice.map((member) => member.name));
2) ๋ฉค๋ฒ๋ค์ ์ด๋ฆ์ '์จ'๊ฐ ๋ถ์ฌ์ง ์ํ๋ก ์ด๋ฆ์ด ๋ด๊ฒจ์๋ ๋ฐฐ์ด์ ๋ง๋ค๊ธฐ
// ๋ฉค๋ฒ๋ค ์ด๋ฆ ๋ค์ '์จ' ๋ถ์ธ ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// map ์ฌ์ฉ
console.log(twice.map((member) => member.name + "์จ"));
3) 1997๋ ์ดํ์ ํ์ด๋ ๋ฉค๋ฒ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// birth๊ฐ 1997๋
ํฌํจ ๊ทธ ๋ค์ธ ๋ฉค๋ฒ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// filter ์ฌ์ฉ
console.log(twice.filter((member) => member.birth >= 1997));
4) ๊ตญ์ ์ด ํ๊ตญ์ด ์๋ ๋ฉค๋ฒ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// ๊ตญ์ ์ด ํ๊ตญ์ด ์๋ ๋ฉค๋ฒ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// filter ์ฌ์ฉ
console.log(twice.filter((member) => member.country !== "ํ๊ตญ"));
5) 2000๋ ์ดํ์ ํ์ด๋๊ณ ๊ตญ์ ์ด ์ผ๋ณธ์ธ ๋ฉค๋ฒ์ ์ด๋ฆ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
๋จผ์ filter()๋ก ์กฐ๊ฑด์ ๋ง๋ ์์๋ฅผ ์ถ๋ ฅํ๊ณ , map()์ผ๋ก ๋ฉค๋ฒ์ ์ด๋ฆ๋ง ๋ฐํ์ํค๋ฉด ๋๋ค.
// birth๊ฐ 1997๋
์ดํ๋ฉด์ ๊ตญ์ ์ด ํ๊ตญ์ด ์๋ ๋ฉค๋ฒ์ ์ด๋ฆ๋ง ๋จ๊ธด ๋ฐฐ์ด ๋ง๋ค๊ธฐ
// filter, map ๋ชจ๋ ์ฌ์ฉ
console.log(
twice
.filter((member) => member.birth >= 1997 && member.country !== "ํ๊ตญ")
.map((member) => member.name)
);
map์ผ๋ก ๋ฆฌ์คํธ ๋ ๋๋งํ๊ธฐ
map๊ณผ filter๋ react์์๋ ๋ฆฌ์คํธ๋ฅผ ๋ ๋๋งํ ๋๋ ์ ์ฉํ๊ฒ ์ฐ์ธ๋ค.
map์ ์์ฐ๋ฉด ์์ ์ด๋ฏธ์ง์ฒ๋ผ div์์๋ฅผ ๊ณ์ ์ฌ์ฉํ๋ฉด์ ๋์์ ์ธ๋ฑ์ค ๋ฒํธ๋ ๋ค ๋ฐ๊ฟ์ค์ผ ๊ฐ๊ฐ์ ๋ฉค๋ฒ๋ค์ ์ถ๋ ฅํ ์ ์๋ค....
ํ์ง๋ง map ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐฐ์ด์ ์์๋ก ์๋ ๋ฐ์ดํฐ๋ค์ jsx ์์๋ก ๋ฐํํด ํ๋ฉด์ ๋์ดํด์ค๋ค.
function App() {
return (
<>
{twice.map((member) =>
<div key={member.name}>
์ด๋ฆ : {member.name}, {member.birth}๋
์, ๊ตญ์ : {member.country}
</div>
)}
</>
);
}
์ด ๋ key prop์ ๋ฐฐ์ด์ ๋ ๋๋งํ ๋ ํญ๋ชฉ์ ์๋ณํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์์ฑ์ผ๋ก, ๊ฐ ํญ๋ชฉ์ด ๊ณ ์ ํ๋ค๋ ๋ป์ด๋ค.
๋ฆฌ์กํธ์์๋ ๊ฐ์ DOM์ ์ฐ๋ฉด์ ๋ณ๊ฒฝ ์ฌํญ์ ์๋ณํ๋ ๊ณผ์ ์ด ํ์ํ๋ฐ, ์ด ์๋ณ์๊ฐ ์์ด์ผ ํจ์จ์ ์ผ๋ก ๋ณ๊ฒฝ๋ ํญ๋ชฉ๋ง ์ ๋ฐ์ดํธ๋ฅผ ํ ์ ์๊ฒ ๋๋ฌธ์ ์์ด๋ ์ง๊ธ์ ์คํ์ ํฌ๊ฒ ๋ฌธ์ ๋ ์์ง๋ง ์ ์ฒด ๋ฆฌ์คํธ๋ฅผ ๋ค์ ๋ ๋๋งํ๋ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋์ด ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐ์ํ ์ ์๋ค.
์ด๋ฒ ์์ ์์๋ ๊ทธ๋ฃน์ ๋ฉค๋ฒ ์ด๋ฆ์ ๊ณ ์ ํ๋ฏ๋ก ๋ฉค๋ฒ์ ์ด๋ฆ์ key๋ก ์ค์ ํ๋ค.
ํ์ง๋ง ์์ ๋ฐฐ์ด๊ณผ๋ ๋ฌ๋ฆฌ ์ฌ๋ฌ ์์ด๋๋ค์ด ๋ง์ด ๋ชจ์ธ ๋ฐฐ์ด์ด๋ผ๋ฉด ๋๊ตฌ ํ๋์ฏค์ ์ด๋ฆ์ด ๊ฒน์น ์๋ ์๊ธฐ ๋๋ฌธ์, ๋ฏธ๋ฆฌ ๋ฐฐ์ด์ ์ ์ธํ ๋ ๋ฐ์ดํฐ์ id๋ฅผ ์ถ๊ฐํด์ฃผ๊ณ ์ด๋ฅผ Key๋ก ํ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
๋๋ uuid ํจํค์ง๋ฅผ ์ฌ์ฉํ ์๋ ์๋๋ฐ, npm install uuid ๋ก ์ค์นํด ์ฌ์ฉํ ์ ์๋ค.
import "./App.css";
import { v4 as uuidv4 } from "uuid";
const twice = [
{ id: uuidv4(), name: "๋์ฐ", birth: 1995, country: "ํ๊ตญ" },
{ id: uuidv4(), name: "์ ์ฐ", birth: 1996, country: "ํ๊ตญ" },
{ id: uuidv4(), name: "๋ชจ๋ชจ", birth: 1996, country: "์ผ๋ณธ" },
{ id: uuidv4(), name: "์ฌ๋", birth: 1996, country: "์ผ๋ณธ" },
{ id: uuidv4(), name: "์งํจ", birth: 1997, country: "ํ๊ตญ" },
{ id: uuidv4(), name: "๋ฏธ๋", birth: 1997, country: "์ผ๋ณธ" },
{ id: uuidv4(), name: "๋คํ", birth: 1998, country: "ํ๊ตญ" },
{ id: uuidv4(), name: "์ฑ์", birth: 1999, country: "ํ๊ตญ" },
{ id: uuidv4(), name: "์ฏ์", birth: 1999, country: "๋๋ง" },
];
function App() {
return (
<>
{twice.map((member) => (
<div key={member.id}>
์ด๋ฆ : {member.name}, {member.birth}๋
์, ๊ตญ์ : {member.country},
์์ด๋ : {member.id}
</div>
))}
</>
);
}
export default App;
๋๋ ์ธ๋ฑ์ค ๊ฐ์ผ๋ก ์์ด๋๋ฅผ ์ค์ ํด๋ ๋๋๋ฐ, ์ด๋ ๋ฐฐ์ด์ด ๋ณ๊ฒฝ๋์์ ๋ ๊ณ ์ ์ฑ์ ๋ณด์ฅํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ์ง ์๋ ํธ์ด ์ข๋ค.
filter์ map์ผ๋ก ๋ฆฌ์คํธ ๋ ๋๋งํ๊ธฐ
filter๋ ๋ฐฐ์ด์ ๋ฐํํด์ฃผ์ง๋ง map()๊ณผ ๋ฌ๋ฆฌ ํ๋ฉด์ ๋ฐ๋ก ๋ ๋๋งํ์ง ๋ชปํ๋ค.
๋ฐ๋ฉด, map์ react ์์๋ฅผ ํฌํจํ ๋ฐฐ์ด์ ๋ฐํํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ํ๋ฉด์ ๋ ๋๋ง์ ํด์ค ์ ์๋ค.
๋๋ฌธ์ filter๋ฅผ ์ธ ๋๋ ๋ค์ map์ผ๋ก react ์์๋ฅผ ๋ฐํํด์ผ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง์ด ๊ฐ๋ฅํด์ง๋ค.
function App() {
return (
<>
{twice
.filter((member) => !member.country="ํ๊ตญ")
.map((member) => (
<div key={member.name}>
์ด๋ฆ : {member.name}, {member.birth}๋
์, ๊ตญ์ : {member.country}
</div>
))}
</>
);
}
'react' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React / SPA vs MPA (0) | 2025.04.04 |
---|---|
React / ์ํ๊ด๋ฆฌ (0) | 2025.04.04 |
React / JSX ๋ฌธ๋ฒ (0) | 2025.04.03 |
React / ์ปดํฌ๋ํธ (0) | 2025.04.03 |
React / ํ๋ก์ ํธ ์์ฑ (0) | 2025.04.03 |