๐คฏ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ๋ฐ๋ณต๊ณผ ๋ฐฐ์ด ๋ด์ฅ ํจ์ Map() ์์๋ณด๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด์ map() ํจ์
arr.map(callback, [thisArg])
์ด ํจ์์ ํ๋ผ๋ฏธํฐ๋ ์ด์ ๊ฐ๋ค.
callback : ์๋ก์ด ๋ฐฐ์ด์ ์์๋ฅผ ์์ฑํ๋ ํจ์๋ก ํ๋ผ๋ฏธํฐ๋ ๋ค์ ์ธ ๊ฐ์ง๋ค.
- currentValue : ํ์ฌ ์ฒ๋ฆฌํ๊ณ ์๋ ์์
- index : ํ์ฌ ์ฒ๋ฆฌํ๊ณ ์๋ ์์์ ์ธ๋ฑ์ค ๊ฐ
- array : ํ์ฌ ์ฒ๋ฆฌํ๊ณ ์๋ ์๋ณธ ๋ฐฐ์ด
thisArg(์ ํ ํญ๋ชฉ) : callback ํจ์ ๋ด๋ถ์์ ์ฌ์ฉํ this ๋ ํผ๋ฐ์ค
๐ ์ฝ๋ ํ ํ์ด์ง๋ก ๋ฐฐ์ด ๋ด์ฅ ํจ์ (map, filter, concat) ์์๋ณด๊ธฐ
import React, {useState} from 'react';
๐//์ด๊น๊ฐ ์ค์ ํ๊ธฐ
const IterationSample = ()=> {
//๊ฐ์ฒด๋ค์ ๋ฐฐ์ด์ ๋ด์๋ค
const [names, setNames] = useState([
{id:1, text:'๋์ฌ๋'},
{id:2, text:'์ผ์'},
{id:3, text:'๋'},
{id:4, text:'๋ฐ๋'},
]);
const [inputText, setInputText] = useState('');
const [nextId, setNextId] = useState(5);
//๐์ด๋ฒคํธ ํธ๋ค๋ง e.target.value๋ ํ์ฌ DOM ๊ฐ
const onChange = e => setInputText(e.target.value);
const onClick = () => { //ํด๋ฆญ
const nextNames = names.concat({
๐//concat : ์๋ก์ด ๋ฐฐ์ด ๋ง๋ค์ด์ค๋ค.
๐//push : ๊ธฐ์กด ๋ฐฐ์ด ์์ฒด๋ฅผ ๋ณ๊ฒฝํด์ค๋ค.
id:nextId,
text:inputText
});
๐ํด๋ฆญ๋๊ณ ๋๋ฉด nextId์ 1์ถ๊ฐ, nextNames ์ด๋ฆ์ผ๋ก ๋์ฒด, setInputText ๊ณต๋ฐฑ์ฒ๋ฆฌ
setNextId(nextId + 1);
setNames(nextNames);
setInputText('');
};
//๐filter : ๋ถ๋ณ์ฑ์ ์ ์งํ๋ฉด์ ๋ฐฐ์ด์ ํน์ ํญ๋ชฉ์ ์ง์์ค๋ค. (๋ฐฐ์ด ๋ด์ฅ ํจ์)
๐filter ์ฌ์ฉํ๋ฉด ํน์ ์์๋ง ์ ์ธ์ํฌ ์ ์๋ค.
const onRemove = id => {
const nextNames = names.filter(name => name.id !== id);
setNames(nextNames);
}
//๐์ด๋ฆ ๋๋ธํด๋ฆญ ์ ์ง์์ฃผ๊ธฐ
const nameList = names.map( name => (
<li key={name.id} onDoubleClick={() => onRemove(name.id)}>
{name.text}
</li>));
return (
<>
<input value={inputText} onChange={onChange} />
<button onClick={onClick}>์ถ๊ฐ</button>
<ul>{nameList}</ul>
</>
)
}
export default IterationSample;
- filter : ๋ถ๋ณ์ฑ์ ์ ์งํ๋ฉด์ ๋ฐฐ์ด์ ํน์ ํญ๋ชฉ์ ์ง์์ค๋ค.
- push : ๊ธฐ์กด ๋ฐฐ์ด ์์ฒด๋ฅผ ๋ณ๊ฒฝํด์ค๋ค.
- concat : ์๋ก์ด ๋ฐฐ์ด์ ๋ง๋ค์ด ์ค๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐คฏ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ๋ฐ๋ณต๊ณผ ๋ฐฐ์ด ๋ด์ฅ ํจ์ Map() ์์๋ณด๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@leemember/๋ฆฌ์กํธ-์ปดํฌ๋ํธ์-๋ฐ๋ณต๊ณผ-๋ฐฐ์ด-๋ด์ฅ-ํจ์-Map-์์๋ณด๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค