๐Ÿงฉ Expo๋กœ Today's ToDoList ๋งŒ๋“ค๊ธฐ(3)- ์ถ”๊ฐ€๊ธฐ๋Šฅ ๊ตฌํ˜„

eassyยท2020๋…„ 8์›” 11์ผ
0

React-Native

๋ชฉ๋ก ๋ณด๊ธฐ
4/7
post-thumbnail

์ €๋ฒˆ ํฌ์ŠคํŒ…์— ์ด์–ด์„œ,
์Šค์ผ€์น˜ ํ•ด๋†“์€ ๋Œ€๋กœ ์Šคํƒ€์ผ๋ง์„ ํ•ด์„œ ํ‹€์„ ์™„์„ฑ ์‹œ์ผœ๋†“์•˜๊ณ 
์ด์ œ ๊ทธ ํ‹€๋Œ€๋กœ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ์ž‘์—…์€ ๋...!

์‚ฌ์‹ค ๋„์ค‘์— ํ‹€์„ ์กฐ๊ธˆ ์ˆ˜์ •,,,

์‚ฌ์‹ค ๋จผ์ € ๋งํ•ด๋‘๊ณ ์ž ํ•œ๋‹ค๋ฉด, ์Šค์ผ€์น˜ํ•œ๋Œ€๋กœ ๋งŒ๋“ค์ง€๋Š” ๋ชปํ–ˆ๋‹ค.
Modal์„ ์‚ฌ์šฉํ•ด์„œ ํ‚ค๋ณด๋“œ๋ฅผ ๋„์šฐ๊ณ , ์ž…๋ ฅํ•œ ๋Œ€๋กœ ๋ชฉ๋ก์— ์ถ”๊ฐ€์‹œํ‚ค๋„๋ก ์ž‘์—…์„ ์ง„ํ–‰ํ•˜๋‹ค๊ฐ€
Modal์—์„œ ๋ญ๊ฐ€ ๊ผฌ์ธ๊ฑด์ง€, ์ถ”๊ฐ€๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๊ธฐ์กด์— ์žˆ๋˜ ๋ชฉ๋ก์ด ์‚ฌ๋ผ์ง€๋ฉด์„œ
์ถ”๊ฐ€ํ•˜๋Š” ๊ณผ์ •์— ์˜ค๋ฅ˜๊ฐ€ ์ƒ๊ธฐ๋Š”๊ฑธ ํ•ด๊ฒฐ์„ ๋ชปํ–ˆ๋‹คใ… ใ… 

๊ทธ๋Ÿฐํ›„, ๋Œ€์‹ ์— ์ธํ’‹์ฐฝ์„ ์ฐฝ ๋งจ ํ•˜๋‹จ์— ์œ„์น˜์‹œ์ผœ์„œ ๋ชฉ๋ก์— ์ถ”๊ฐ€์‹œํ‚ค๋Š” ์Šคํƒ€์ผ๋ง์œผ๋กœ
์ง„ํ–‰์„ ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ,
๊ตฌ๊ธ€๋ง์œผ๋กœ๋Š” ์‰ฌ์›Œ๋ณด์ด๋Š” ํ‚ค๋ณด๋“œ ์œ„์— ์ธํ’‹์ฐฝ์„ ๋„์šฐ๋Š”๊ฒŒ ์™œ๊ทธ๋ฆฌ๋„ ์•ˆ๋˜๋Š”๊ฑด์ง€,,,,๐Ÿคฌ

<keyboardAboidingView>๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋˜๋˜๋ฐ
์™œ ๋‚ด๊บผ๋Š” ์•ˆ๋˜๋Š”๊ฑด์ง€ใ… ใ…  <ScrollView>์™€ ๋ญ”๊ฐ€๊ฐ€ ๊ผฌ์ด๋Š”๊ฑด์ง€
๋ง์„ ๋“ฃ์ง€๊ฐ€ ์•Š์•˜๊ณ ....
์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์‹œ๋„ํ•ด๋ด๋„ ๊ณ„์† ํ‚ค๋ณด๋“œ๊ฐ€ ์ธํ’‹์ฐฝ์„ ๊ฐ€๋ ค๋ฒ„๋ฆฌ๋Š” ๋ฐ”๋žŒ์—
๊ทธ๋ƒฅ ์‰ฝ๊ฒŒ.... ๋งจ ์œ„๋กœ ์˜ฌ๋ ค๋ฒ„๋ฆฌ๊ธฐ๋กœ ํ–ˆ๋‹คใ… ใ…  ์‹œ๊ฐ„์„ ๋” ์“ธ์ˆ˜๊ฐ€ ์—†์–ด!!!!

ํ•  ์ผ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ โœ๐Ÿป

๊ธฐ์กด์— Header์— ์žˆ๋Š” + ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ‚ค๋ณด๋“œ์ฐฝ์ด ๋œจ๋„๋ก ์Šค์ผ€์น˜๋ฅผ ํ•ด๋‘์—ˆ์œผ๋‚˜,
๊ณ„์† ๋„์›Œ์ ธ ์žˆ๋Š” ์ธํ’‹์ฐฝ์— ๋‚ด์šฉ์„ ์ž…๋ ฅํ•œ ํ›„ v์„ ํด๋ฆญํ•˜๋ฉด
๋ชฉ๋ก์— ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ๋„๋ก ์ˆ˜์ •์ž‘์—…์„ ๊ฑฐ์ณค๋‹ค.

1) ๋ชฉ๋ก์— ์•„์ดํ…œ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ

์šฐ์„  ๋ชฉ๋ก์— ์•„์ดํ…œ๋“ค์„ ์ถ”๊ฐ€ํ•˜๊ณ , ์‚ญ์ œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ todos๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ
id,title,checked์˜ ์†์„ฑ์„ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ๊ด€๋ฆฌํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

  • id : ๊ฐ ์•„์ดํ…œ์˜ ๊ณ ์œ  ์•„์ด๋””
  • title : ์•„์ดํ…œ์˜ ๋‚ด์šฉ
  • checked : ์•„์ดํ…œ๋“ค์˜ ์™„๋ฃŒ ์—ฌ๋ถ€ ( true์ผ๋•Œ ์™„๋ฃŒ์ƒํƒœ )

์ดํ›„, useState ํ›…์„ ํ†ตํ•ด์„œ ์ดˆ๊ธฐ ์ƒํƒœ๊ฐ’์„, ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ชฉ๋ก ๊ฐ์ฒด๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๋ฐฐ์—ด[]์„ ๋„ฃ์–ด์ค€๋‹ค

const [todos , setTodos ] = useState([]);

๋ชฉ๋ก์— ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด addItem ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“  ํ›„ setTodos๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.

const addItem = text => {
  setTodos([
    ...todos,
    {id : Math.random().toString(), title : text, checked : false},
  ]);
};
  • id๋Š” ๋žœ๋ค์œผ๋กœ ์ƒ์„ฑ
  • title์€ ์ž…๋ ฅ๋œ text๊ฐ’์ด ๋“ค์–ด๊ฐ€๋„๋ก
  • checked ์†์„ฑ์€ ์šฐ์„  false๊ฐ’์œผ๋กœ

๊ธฐ์กด์— ๋ชฉ๋ก์— ์žˆ๋Š” ํ• ์ผ๋“ค์€ ...todos๋ฅผ ๋ณด๋ฉด, ํ˜„์žฌ์ƒํƒœ์˜ todos๋“ค์„ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜จ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
๋”ฐ๋ผ์„œ setTodosํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ์ด์ „์˜ ๋ชฉ๋ก์€ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋ฉด์„œ ์ƒˆ๋กœ์šด ์•„์ดํ…œ๋“ค์„ ์ถ”๊ฐ€ํ•œ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

2) TextInput์—์„œ ์ž…๋ ฅ๋˜๋Š” ๊ฐ’ ์—…๋ฐ์ดํŠธ๋˜๊ฒŒ ํ•˜๊ธฐ

์ดํ›„ App.js์—์„œ <TodoInsert onAddItem={addItem}>์ฒ˜๋Ÿผ inset์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•œ ํ›„ TodoInsert.js์—์„œ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

TextInput์—์„œ ์ž…๋ ฅ๋˜๋Š” ํ…์ŠคํŠธ๊ฐ’์„ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ…์ŠคํŠธ์˜ ์ƒํƒœ๊ฐ’์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๋„ ํ•„์š”ํ•œ๋ฐ, ์ƒˆ๋กœ์šด useState ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ด€๋ฆฌํ•ด์ค€๋‹ค.
์ด๋ฅผ <TextInput>์—์„œ๋Š” onChangeText์†์„ฑ์„ ํ†ตํ•ด ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜๋กœ ๊ด€๋ฆฌํ•ด์ฃผ๊ณ 
value๊ฐ’์œผ๋กœ๋Š” state๊ฐ’์ธ newTodoItem๋„ฃ์–ด์ฃผ๊ฒŒ ๋˜๋ฉด
์‹ค์‹œ๊ฐ„์œผ๋กœ ์ž…๋ ฅ๋œ ํ…์ŠคํŠธ์˜ ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๊ฒŒ ๋œ๋‹ค.

export default function TodoInsert({onAddItem}) {
 const [newTodoItem, setNewTodoItem] = useState('');
 const itemInputHandler = (newTodo) => {
   setNewTodoItem(newTodo);
 };
 ...
 <TextInput
 ...
 onChangeText={itemInputHandler}
 value={newTodoItem}
 ...

3) ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์•„์ดํ…œ์ด ๋ชฉ๋ก์— ์ถ”๊ฐ€๋˜๊ฒŒ ํ•˜๊ธฐ

๋‹ค์Œ์œผ๋กœ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์•„์ดํ…œ์ด ๋ชฉ๋ก์— ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ๋„๋ก ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.
onAddItemํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ž…๋ ฅํ•œ ํ…์ŠคํŠธ ๊ฐ’์„ ๋ฐ›์•„์„œ ๋ชฉ๋ก์— ์ถ”๊ฐ€ํ•˜๊ณ ,
setNewTodoItmeํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ๋ฒ„ํŠผ์ด ํด๋ฆญ๋œ ํ›„ ์ž…๋ ฅ์ฐฝ์„ ๊ณต๋ฐฑ์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์—ญํ• ์„ ์ฃผ์–ด์ค€๋‹ค.

const addItemHandler = () => {
  onAddItem(newTodo);
  setNewTodoItem('');
}
...
<AddButton onPress={addItemHandler} />
...

4) ๋ฆฌ์ŠคํŠธ์— ์ถœ๋ ฅ์‹œํ‚ค๊ธฐ ์œ„ํ•ด TodoList์— todos ๋„˜๊ฒจ์ฃผ๊ธฐ

์•ž์„œ ๋งํ–ˆ๋˜ ํ•  ์ผ ๋ชฉ๋ก์˜ ๊ฐ์ฒด๊ฐ€ ๋‹ด๊ธด ๋ฐฐ์—ด์ธ todos๋ฅผ TodoList์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•ด์ค€๋‹ค.
์ดํ›„ ๋ฐฐ์—ด์— ์žˆ๋Š” ์•„์ดํ…œ์„ ๊ฐ๊ฐ TodoListItem์ปดํฌ๋„ŒํŠธ์— ๋„˜๊ธฐ๊ธฐ ์œ„ํ•ด map()์„ ์‚ฌ์šฉํ•ด์ค€๋‹ค.

export default function TodoList({todos}) {
  return (
    <ScrollView>
    {todos.map(toeo => (
     	<TodoListItem {...todo} />
    ))}
	</ScrollView>
  );
};

์•„์ดํ…œ ๊ฐ๊ฐ์—๋Š” ๊ณ ์œ ํ•œ id์™€ titile, checked๋ผ๋Š” key์™€ value๊ฐ€ ๋‹ด๊ฒจ์žˆ๋Š”๋ฐ
์ด๋ฅผ <TodoListItem>์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

export default function TodoListItem({title, id, checked}) {
  return 
  ...
  <ItemContent>{title}</ItemContent>

์ด๋ ‡๊ฒŒ ๋˜๋ฉด ์ธํ’‹์ฐฝ์— ์ž…๋ ฅํ•œ ํ…์ŠคํŠธ๊ฐ€ ๋ฒ„ํŠผ ํด๋ฆญ์„ ํ†ตํ•ด์„œ ๋ฆฌ์ŠคํŠธ์— ์ถœ๋ ฅ์ด ๋œ๋‹ค.

profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

0๊ฐœ์˜ ๋Œ“๊ธ€