๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

react

React / map, filter๋กœ ๋ฐ˜๋ณต ๋ Œ๋”๋งํ•˜๊ธฐ

 

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>
        ))}
    </>
  );
}

 

ํ•œ๊ตญ ๊ตญ์ ์ด ์•„๋‹Œ ๋ฉค๋ฒ„๋“ค๋งŒ filterํ•œ ํ›„, map์œผ๋กœ ๋ฐ˜ํ™˜

 

 

 

'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