๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“ฑ Cross Platform31

[React Native] ์Šค์™€์ดํ”„ ํ•˜๋ฉด ์‚ญ์ œ ๋ฒ„ํŠผ ๋‚˜์˜ค๋Š” ์ปดํฌ๋„ŒํŠธ ๊ตฌํ˜„ํ•˜๊ธฐ (Swipeable Component with delete button) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ React-Native์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šค์™€์ดํ”„ ํ–ˆ์„ ๋•Œ ์‚ญ์ œ ๋ฒ„ํŠผ์ด ๋‚˜์˜ค๋Š” ๊ธฐ๋Šฅ์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Preview Install npm install --save react-native-gesture-handler Screen.tsx import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler'; ์˜ค๋ฅธ์ชฝ์— ๋“ค์–ด๊ฐˆ Delete ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. dragX๋ฅผ ๋ฐ›์•„์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•˜๊ณ , id์— List์˜ index๋ฅผ ๋ฐ›์•„์™€ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ํ•ด๋‹น index๋ฅผ ์ถœ๋ ฅํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. const renderRightActions = (dragX, index) => { co.. 2022. 8. 18.
[React Native] RTK-Query ํŒŒ๋ผ๋ฏธํ„ฐ์— ๋งž๊ฒŒ ํŠน์ • ๋ฐ์ดํ„ฐ๋งŒ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ(Get specific data by parameter using RTK-query) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ RTK-Query์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ์— ๋งž๊ฒŒ ์›ํ•˜๋Š” ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์‚ฝ์งˆ์„ ํ•˜๊ณ  ๊ฒฐ๊ตญ ํ•ด๊ฒฐ๋ฒ•์„ ์•Œ์•„๋‚ด๊ฒŒ ๋˜์–ด ๊ธ€๋กœ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ 1. ์ฒซ ๋ฒˆ์งธ ์‹œ๋„ ์šฐ์„  ์ œ๊ฐ€ ํ•˜๋ ค ํ–ˆ๋˜๊ฑด ์œ ์ €๋ฅผ ์ด๋ฆ„์œผ๋กœ ์กฐํšŒํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ์š”. ์•„๋ž˜์™€ ๊ฐ™์ด ์ฟผ๋ฆฌ๋ฅผ ํ†ตํ•ด์„œ ์—”๋“œํฌ์ธํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. export const userAPISlice = createApi({ reducerPath: 'userAPI', baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}), endpoints: builder => ({ ... getUserByName: builde.. 2022. 8. 12.
[React Native] useNavigation์™€ useRoute ์ด์šฉํ•ด์„œ ํ™”๋ฉด ์ด๋™ํ•˜๊ณ  ๋ฐ์ดํ„ฐ ์ „๋‹ฌํ•˜๊ธฐ (Move and Pass data between two screens using Hooks) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ํ‰์†Œ์— ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ navigation์„ props๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๋ถˆํŽธํ–ˆ๋Š”๋ฐ์š”. ์˜ค๋Š˜์€ React-Native์—์„œ navigation์„ props๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, useNavigation๊ณผ useRoute๋ฅผ ๋งŒ๋“ค์–ด ์ค˜์„œ ํ™”๋ฉด์„ ์ด๋™๊ณผ ํ•จ๊ป˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๋ฐ›์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install @react-navigation/stack npm install react-native-safe-area-context Navigation Navigation/index.ts ๊ธฐ์กด Pro.. 2022. 8. 12.
[React Native] ChatApp Socket.io Room ์ ์šฉํ•˜๊ธฐ (feat. TypeScript) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์ €๋ฒˆ ๊ธ€์—์„œ Node.js์—์„œ Socket.io๋ฅผ ์ด์šฉํ•˜์—ฌ Room์„ ๋งŒ๋“ค์–ด ๋ณด์•˜๋Š”๋ฐ์š”. (ํ˜น์‹œ ์•ˆ๋ณด์‹  ๋ถ„๋“ค์€ ์—ฌ๊ธฐ ์—์„œ ํ™•์ธํ•ด ์ฃผ์„ธ์š”!) ์˜ค๋Š˜์€ ๋ฐฑ์—”๋“œ ์„œ๋ฒ„์—์„œ ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ํ”„๋ก ํŠธ์— ์ ์šฉํ•ด ๋ณด๋Š” ๊ณผ์ •์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Preview Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-screens npm install react-native-safe-area-context npm install socket.io-client ScreenEnums ์Šคํฌ๋ฆฐ ์ข…๋ฅ˜๋ฅผ Enum์œผ๋กœ ๋งŒ๋“ค์–ด ๋†“์Šต๋‹ˆ๋‹ค. export .. 2022. 8. 10.
[React Native] RTK-Query๋กœ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๊ธฐ (feat. Typescript) Install redux-toolkit npm install @reduxjs/toolkit TodoModel interface TodoModel { id: number; title: string; content: string; } Create API Slice createApi์™€ fetchBaseQuery๋ฅผ import ํ•ด์ค๋‹ˆ๋‹ค. import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'; ์ €๋Š” TodoList๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ๋งŒ๋“ค์–ด ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. reducerPath: ์Šคํ† ์–ด์˜ reducer๋กœ ์ง€์ •ํ•  Path์˜ ์ด๋ฆ„ baseQuery: ๊ธฐ๋ณธ์œผ๋กœ ์ง€์ •ํ•  ์„œ๋ฒ„ URL tagTypes: ์ž๋™์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ํŒจ์น˜๋˜๊ฒŒ ๊ตฌ๋ณ„ํ•  ํƒ€์ž… endpo.. 2022. 8. 6.
[React Native] Redux-Toolkit์ด๋ž€? (feat. ๊ธฐ์กด Redux์™€ ๋น„๊ต) ์•ˆ๋…•ํ•˜์„ธ์š”. Foma ์ž…๋‹ˆ๋‹ค! ์ €๋ฒˆ ๊ธ€์—์„œ Redux๊ฐ€ ๋ฌด์—‡์ด๊ณ  ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ๋‹ค๋ค˜์—ˆ๋Š”๋ฐ์š”. (์•„์ง ์•ˆ ๋ณด์‹  ๋ถ„๋“ค์€ ์—ฌ๊ธฐ ์—์„œ ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค!) Redux์— ๋Œ€ํ•ด ์ฐพ์•„๋ณด๋‹ˆ Redux๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ํšจ์œจ์ ์ธ Redux-Toolkit์ด ์žˆ๋”๋ผ๊ตฌ์š”. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ Redux-Toolkit์ด ๋ฌด์—‡์ด๊ณ  ์™œ ๋” ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ณ  ํšจ์œจ์ ์ธ์ง€์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Redux-Toolkit์ด๋ž€? Redux-Toolkit์€ Redux๋ฅผ ๋งŒ๋“  ๊ณณ์—์„œ ๊ณต์‹์ ์œผ๋กœ ํšจ์œจ์ ์ธ Redux ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํˆดํ‚ท์ž…๋‹ˆ๋‹ค. Redux ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ณ , Redux ๋ณด๋‹ค ํ›จ์”ฌ ํšจ์œจ์ ์ด๋ฏ€๋กœ ์‚ฌ์šฉ์„ ๊ณต์‹์ ์œผ๋กœ ๊ฐ•๋ ฅํžˆ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋–ค ๋ฉด์—์„œ ๋” ํšจ์œจ์ ์ด๋ผ๋Š” ๊ฒƒ ์ผ๊นŒ์š”? ๊ธฐ.. 2022. 8. 6.
[React Native] Redux๋ฅผ ์ด์šฉํ•ด Counter ์•ฑ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ (feat. Typescript) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์ด์ „ ๊ธ€์—์„œ Redux์— ๋Œ€ํ•ด ๋‹ค๋ค˜๋Š”๋ฐ์š”. ์˜ค๋Š˜์€ ๊ทธ Redux๋ฅผ ์ด์šฉํ•ด ๊ฐ„๋‹จํ•œ Counter ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ (ํ™˜๊ฒฝ์€ React Natvie CLI, Typescript๋กœ ์ง„ํ–‰ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.) Preview Install Typescript Project Init npx react-native init "ํ”„๋กœ์ ํŠธ ์ด๋ฆ„" --template react-native-template-typescript redux npm install redux react-redux npm install react-redux @types/react-native npm install @types/react-native Counter ๊ฐ€์žฅ ๋จผ์ € ์นด์šดํ„ฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค์–ด ์ค.. 2022. 8. 4.
[React Native] Redux๋ž€? (feat. Flux) Redux๋ž€? Javascript ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ "์ƒํƒœ?๋Š” ๋ฐ”๋€Œ๋Š” ์–ด๋–ค ๊ฐ’๋“ค์„ ์˜๋ฏธํ•˜๋Š”๋ฐ์š”. ์˜ˆ๋ฅผ ๋“ค๋ฉด ๊ณ„์‚ฐ๊ธฐ์—์„œ ์–ด๋–ค ๋ฒ„ํŠผ๋“ค์„ ๋ˆ„๋ฅด๋ฉด ๊ณ„์‚ฐํ•œ ๊ฐ’์ด ๊ณ„์†ํ•ด ๋‹ฌ๋ผ์ง€์ฃ ? ๋ฐ”๋กœ ๊ณ„์‚ฐํ•œ ๊ฐ’์ด => ๊ณ„์‚ฐํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒํƒœ์ธ ๊ฒƒ ์ž…๋‹ˆ๋‹ค. Flux๋ž€? Redux๋Š” Facebook์˜ Flux ๋””์ž์ธ ํŒจํ„ด์—์„œ ์œ ๋ž˜๋œ ๊ฒƒ์ธ๋ฐ์š”. Flux๋Š” Web ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ MVC ํŒจํ„ด์œผ๋กœ ๊ตฌํ˜„ํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž ๋งŒ๋“ค์–ด ์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋– ํ•œ ๋ฌธ์ œ๋“ค์ด ๋ฐœ์ƒํ–ˆ์„๊นŒ์š”? ๊ธฐ์กด MVC๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด Model๊ณผ View๊ฐ€ ์–‘๋ฐฉํ–ฅ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•ฑ์ด ์ปค์ง€๋ฉด ์ปค์งˆ์ˆ˜๋ก Model๊ณผ View์˜ ์–‘๋ฐฉํ–ฅ ์†Œํ†ต์ด ๋Š˜์–ด๋‚ฌ๊ณ , ์ด๊ฒƒ์€ ๋ฐ์ดํ„ฐ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋น ๋ฅด๊ฒŒ.. 2022. 8. 3.
[React Native] ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…์•ฑ ๋งŒ๋“ค์–ด๋ณด๊ธฐ 2 - Websocket ์ด์šฉํ•˜์—ฌ ํ”„๋ก ํŠธ ๊ตฌํ˜„ํ•˜๊ธฐ (Build a real-time chatapp 1 - Implement frontend with websocket) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์ง€๋‚œ ๊ธ€์— Node.js๋กœ ์›น์†Œ์ผ“ ์„œ๋ฒ„๋ฅผ ๊ตฌํ˜„ํ–ˆ๋Š”๋ฐ์š”. ์˜ค๋Š˜์€ React Native์—์„œ ํ•ด๋‹น ์„œ๋ฒ„๋ฅผ ์ด์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ฑ„ํŒ…์„ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ (ํ™˜๊ฒฝ์€ React Native CLI + Typescript ์ž…๋‹ˆ๋‹ค.) Tutorial ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…์•ฑ ๋งŒ๋“ค์–ด๋ณด๊ธฐ 1 - Websocket ์ด์šฉํ•˜์—ฌ ๋ฐฑ์—”๋“œ ๊ตฌํ˜„ํ•˜๊ธฐ (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…์•ฑ ๋งŒ๋“ค์–ด๋ณด๊ธฐ 2 - Websocket ์ด์šฉํ•˜์—ฌ ํ”„๋ก ํŠธ ๊ตฌํ˜„ํ•˜๊ธฐ (Build a real-time chatapp 1 - Implement frontend with webs.. 2022. 7. 28.
[React Native] React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 5 - Axios ์ด์šฉํ•˜์—ฌ CRUD ๊ตฌํ˜„ํ•˜๊ธฐ (Implementing a api with Axios) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์€ React Native + Node.js + MySQL ํŠœํ† ๋ฆฌ์–ผ์˜ ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์ธ Axios๋ฅผ ํ™œ์šฉํ•˜์—ฌ CRUD๋ฅผ ๊ตฌํ˜„ํ•ด ์‹ค์ œ ์„œ๋ฒ„์— API๋ฅผ ์š”์ฒญํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ณ , ์ƒ์„ฑํ•˜๊ณ , ์ˆ˜์ •ํ•˜๊ณ  ,์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Tutorial React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 1 - ์„œ๋ฒ„ ์ดˆ๊ธฐ ์„ธํŒ…ํ•˜๊ธฐ (Initialize server setting) React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 2 - MySQL ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ (Create a MySQL Table) React Native + Node.js + MySQL To do lis.. 2022. 7. 27.
[React Native] React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 3 - React Native ํ™”๋ฉด ๊ตฌํ˜„ํ•˜๊ธฐ (Implement frontend) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ React Native + CLI + TS๋กœ ํˆฌ ๋‘ ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Tutorial React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 1 - ์„œ๋ฒ„ ์ดˆ๊ธฐ ์„ธํŒ…ํ•˜๊ธฐ (Initialize server setting) React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 2 - MySQL ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ (Create a MySQL Table) React Native + Node.js + MySQL To do list ๋งŒ๋“ค๊ธฐ 3 - React Native ํ™”๋ฉด ๊ตฌํ˜„ํ•˜๊ธฐ (Implement frontend) React Native + Node.js + My.. 2022. 7. 26.
[React Native] ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ props ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์—…๋ฐ์ดํŠธ ํ•ด์ฃผ๊ธฐ(Functional Component update on props change) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ props๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ํ™”๋ฉด์ด ์—…๋ฐ์ดํŠธ ๋˜๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ Problem ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ์ˆ˜์ • ๋ฒ„ํŠผ์ด ๋ˆŒ๋ฆฌ๋ฉด ํผ ํ˜•์‹์˜ ๋ชจ๋‹ฌ์ด ๋œจ๋„๋ก ๊ตฌํ˜„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์œ„ ๊ณผ์ •์—์„œ ์ˆ˜์ • ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋• ํ•ด๋‹น ๋ฒ„ํŠผ์ด ๋ˆŒ๋ฆฐ ๋ฐ์ดํ„ฐ ๋ชจ๋ธ์˜ ๊ฐ’์ด ์ธํ’‹ ์•ˆ์— ๋ฏธ๋ฆฌ ์ž‘์„ฑ๋ผ๋„๋ก ํ•˜๊ณ , ์ถ”๊ฐ€ ๋ฒ„ํŠผ์ด ๋ˆŒ๋ ธ์„ ๋• ๋นˆ ์ธํ’‹์ฐฝ์ด ๋ณด์ด๋„๋ก ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์™ผ์ชฝ์ด ์ถ”๊ฐ€(+) ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ, ์˜ค๋ฅธ์ชฝ์ด ์ˆ˜์ •๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ์ž…๋‹ˆ๋‹ค. TodoList.tsx ์œ„ ๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์—์„œ useState๋ฅผ ๊ตฌํ˜„ํ•ด ์ค๋‹ˆ๋‹ค. const [todos, setTodos] = useState(todoDatas); const [todo, setTo.. 2022. 7. 26.
728x90
๋ฐ˜์‘ํ˜•