{"id":25932,"date":"2024-10-27T06:48:34","date_gmt":"2024-10-27T06:48:34","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25932"},"modified":"2024-11-26T07:50:11","modified_gmt":"2024-11-26T07:50:11","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8-%ea%b0%95%ec%a2%8c-%eb%b0%b0%ec%97%b4%ea%b3%bc-%eb%a9%94%ec%84%9c%eb%93%9c","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25932\/","title":{"rendered":"\ub9ac\uc561\ud2b8 \uac15\uc88c: \ubc30\uc5f4\uacfc \uba54\uc11c\ub4dc"},"content":{"rendered":"

<\/p>\n

\ub9ac\uc561\ud2b8(React)\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\ub85c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ub9ce\uc740 \uacbd\uc6b0, UI\ub97c \uad6c\ucd95\ud558\ub294 \uacfc\uc815\uc5d0\uc11c \ubc30\uc5f4\uc744 \ub2e4\ub8e8\uac8c \ub418\ub294\ub370, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ubc30\uc5f4\uacfc \uadf8\uc5d0 \uad00\ub828\ub41c \uba54\uc11c\ub4dc\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud558\ub294 \uac83\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ubc30\uc5f4\uc744 \ub2e4\ub8e8\ub294 \ub2e4\uc591\ud55c \uba54\uc11c\ub4dc\uc640 \uc774\ub97c \ud65c\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubc30\uc5f4 \uc774\ud574\ud558\uae30<\/h2>\n

\ubc30\uc5f4\uc740 \uc21c\uc11c\uac00 \uc788\ub294 \ub370\uc774\ud130\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc5ec\ub7ec \ub370\uc774\ud130\ub97c \ubcf4\uad00\ud558\uace0 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubc30\uc5f4\uc740 \ub2e4\uc591\ud55c \uba54\uc11c\ub4dc\ub97c \uc81c\uacf5\ud558\uba70, \uc774\ub97c \ud1b5\ud574 \ubc30\uc5f4\uc758 \ub0b4\uc6a9\uc744 \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

1.1 \ubc30\uc5f4 \uc0dd\uc131<\/h3>\n

\ubc30\uc5f4\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc740 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \ubc30\uc5f4 \uc0dd\uc131 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

const array1 = [];\nconst array2 = [1, 2, 3];\nconst array3 = new Array(4, 5, 6);<\/code><\/pre>\n
1.2 \ubc30\uc5f4 \uc18d\uc131<\/h3>\n
\ubc30\uc5f4\uc5d0\ub294 \uba87 \uac00\uc9c0 \uc720\uc6a9\ud55c \uc18d\uc131\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8 \uc911 length<\/code> \uc18d\uc131\uc744 \ud1b5\ud574 \ubc30\uc5f4\uc758 \uae38\uc774\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
console.log(array2.length); \/\/ 3<\/code><\/pre>\n
2. \ubc30\uc5f4 \uba54\uc11c\ub4dc<\/h2>\n
\ubc30\uc5f4 \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc744 \ub2e4\ub8e8\ub294 \ub370 \uc720\uc6a9\ud55c \uc5ec\ub7ec \uac00\uc9c0 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 \ubc30\uc5f4 \uba54\uc11c\ub4dc\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
2.1 push()<\/h3>\n
push()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \ub9c8\uc9c0\ub9c9\uc5d0 \ud558\ub098 \uc774\uc0c1\uc758 \uc694\uc18c\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2];\narr.push(3);\nconsole.log(arr); \/\/ [1, 2, 3]<\/code><\/pre>\n
2.2 pop()<\/h3>\n
pop()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \ub9c8\uc9c0\ub9c9 \uc694\uc18c\ub97c \uc81c\uac70\ud558\uace0 \uadf8 \uc694\uc18c\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3];\nconst lastElement = arr.pop();\nconsole.log(lastElement); \/\/ 3\nconsole.log(arr); \/\/ [1, 2]<\/code><\/pre>\n
2.3 shift()<\/h3>\n
shift()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uccab \ubc88\uc9f8 \uc694\uc18c\ub97c \uc81c\uac70\ud558\uace0 \uadf8 \uc694\uc18c\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3];\nconst firstElement = arr.shift();\nconsole.log(firstElement); \/\/ 1\nconsole.log(arr); \/\/ [2, 3]<\/code><\/pre>\n
2.4 unshift()<\/h3>\n
unshift()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uccab \ubc88\uc9f8\uc5d0 \ud558\ub098 \uc774\uc0c1\uc758 \uc694\uc18c\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [2, 3];\narr.unshift(1);\nconsole.log(arr); \/\/ [1, 2, 3]<\/code><\/pre>\n
2.5 splice()<\/h3>\n
splice()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uc694\uc18c\ub97c \ucd94\uac00\ud558\uac70\ub098 \uc81c\uac70\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3, 4];\narr.splice(2, 1, 'a', 'b'); \nconsole.log(arr); \/\/ [1, 2, 'a', 'b', 4]<\/code><\/pre>\n
2.6 slice()<\/h3>\n
slice()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uc77c\ubd80\ubd84\uc744 \ubcf5\uc0ac\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3, 4];\nconst newArr = arr.slice(1, 3);\nconsole.log(newArr); \/\/ [2, 3]<\/code><\/pre>\n
2.7 forEach()<\/h3>\n
forEach()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc8fc\uc5b4\uc9c4 \ud568\uc218\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3];\narr.forEach(element => {\n    console.log(element); \/\/ 1, 2, 3\n});<\/code><\/pre>\n
2.8 map()<\/h3>\n
map()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uc694\uc18c\uc5d0 \ub300\ud574 \uc8fc\uc5b4\uc9c4 \ud568\uc218\ub97c \ud638\ucd9c\ud55c \uacb0\uacfc\ub97c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3];\nconst doubled = arr.map(num => num * 2);\nconsole.log(doubled); \/\/ [2, 4, 6]<\/code><\/pre>\n
2.9 filter()<\/h3>\n
filter()<\/code> \uba54\uc11c\ub4dc\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc744 \ub9cc\uc871\ud558\ub294 \ubaa8\ub4e0 \uc694\uc18c\ub97c \ubaa8\uc544 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3, 4];\nconst evenNumbers = arr.filter(num => num % 2 === 0);\nconsole.log(evenNumbers); \/\/ [2, 4]<\/code><\/pre>\n
2.10 reduce()<\/h3>\n
reduce()<\/code> \uba54\uc11c\ub4dc\ub294 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uace0, \ub2e8\uc77c \uac12\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.<\/p>\n
const arr = [1, 2, 3, 4];\nconst sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\nconsole.log(sum); \/\/ 10<\/code><\/pre>\n
3. \ub9ac\uc561\ud2b8\uc5d0\uc11c \ubc30\uc5f4 \ud65c\uc6a9\ud558\uae30<\/h2>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c, \ubc30\uc5f4\uc740 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub3d9\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uac70\ub098 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ucc98\ub9ac\ud558\ub294 \ub370 \ubc30\uc5f4 \uba54\uc11c\ub4dc\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1 \ubc30\uc5f4\uc744 \uc0c1\ud0dc\ub85c \uad00\ub9ac\ud558\uae30<\/h3>\n
\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc885\uc885 \ubc30\uc5f4\uc744 \uc0c1\ud0dc\ub85c \uad00\ub9ac\ud558\uac8c \ub429\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc0c1\ud0dc\ub85c \ubc30\uc5f4\uc744 \uc0ac\uc6a9\ud558\ub294 \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n
import React, { useState } from 'react';\n\nconst App = () => {\n    const [items, setItems] = useState(['\uc0ac\uacfc', '\ubc14\ub098\ub098', '\uccb4\ub9ac']);\n\n    const addItem = () => {\n        setItems([...items, '\ub538\uae30']);\n    };\n\n    return (\n        
\n            
\uacfc\uc77c \ubaa9\ub85d<\/h1>\n