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

List1

[React Native] List์— Component ์ ์šฉํ•˜๊ธฐ (feat. FlatList,Pressable) ์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค! ์˜ค๋Š˜์€ React Native์—์„œ Component๋ฅผ ๋งŒ๋“ค์–ด List์— ์ ์šฉํ•ด ๋ณด๋Š” ๊ฒƒ์„ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. (iOS๋กœ ๋งํ•˜๋ฉด TableView๋ฅผ ๋งŒ๋“ค์–ด Cell์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•˜๋”๋ผ๊ตฌ์š”.) ๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~ ์–ธ์–ด๋Š” TypeScript, ํ™˜๊ฒฝ์€ Expo๋กœ ์ง„ํ–‰ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Model Person.ts ๋ฐ์ดํ„ฐ๋ฅผ ๋„์šธ ๋ชจ๋ธ์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. export interface Person { name: string; age: number; gender: string; } Component List์— ๋„์šธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ PersonCell๋กœ ๋งŒ๋“ค์–ด ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค. (iOS ์Šคํƒ€์ผ๋กœ...ใ…Ž) ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์•„์ดํ…œ์„ Person์œผ๋กœ ์ง€์ •ํ•ด ์ฃผ๊ณ  ๊ฐ ํ”„๋กœํผ.. 2022. 6. 17.
728x90
๋ฐ˜์‘ํ˜•