๐Ÿงฉ Expo๋กœ Today's ToDoList ๋งŒ๋“ค๊ธฐ(5)- ํ• ์ผ ์ฒดํฌ๊ธฐ๋Šฅ ๊ตฌํ˜„

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

React-Native

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

ํ•  ์ผ ์™„๋ฃŒ์ฒดํฌ ๊ธฐ๋Šฅ โœ…

ํ•  ์ผ ๋ชฉ๋ก์—์„œ ์™„๋ฃŒ๋œ ์ผ๋“ค์„ ํ‘œ์‹œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ๋กœ ํ•œ๋‹ค.
์Šคํƒ€์ผ๋ง์€ ์š”๋ ‡๊ฒŒ ํ•˜๊ธฐ๋กœ ๐Ÿ˜Ž

1) toggle ๊ธฐ๋Šฅ ์ถ”๊ฐ€ํ•˜๊ธฐ

์‚ญ์ œ ๊ธฐ๋Šฅ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ App.js์—์„œ onToggleํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

const onToggle = (id) = e => {
  setTodos(
    todos.map(todo => 
      todo.id === id ? {...todo, checked: !todo.checked} : todo,
    ),
  );
};

์ด๋Š” ์•„์ดํ…œ์˜ id๋ฅผ ๋ฐ›์•„์™€์„œ ํ•ด๋‹น ์•„์ดํ…œ์˜ checked์†์„ฑ์„ ๋ฐ˜๋Œ€๋กœ ๋ณ€๊ฒฝํ•ด์ค€๋‹ค.
(true->false / false->true)
์ดํ›„ ์ด๋ฅผ <TodoLIst>์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌ ํ›„ ๊ทธ๋Œ€๋กœ TodoList.js๋กœ ์ „๋‹ฌํ•œ๋‹ค.

export default function TodoList({todos, onRemove, onToggle}) {
  return (
    <ScrollView>
      {todos.map(todo => (
        <TodoListItem
     	  key={todo.id}
          {...todo}
	  onRemove={onRemove}
	  onToggle={onToggle}
	 />
       ))}
    </ScrollView>
  );
};

์ดํ›„ TodoListItem.js์—์„œ๋Š” <TouchableOpacity>์— onPressOut์ด๋ฒคํŠธ์— onToggle()ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•œ๋‹ค.
๊ทธ๋Ÿฐ ํ›„ checked๊ฐ€ true์ผ ๋•Œ์˜ ์Šคํƒ€์ผ๋ง, false์ผ๋•Œ์˜ ์Šคํƒ€์ผ๋ง์„ ๊ตฌ๋ถ„ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
๋‚˜๋Š” ์ฒดํฌ์Šคํƒ€์ผ๋ง์€ FontAwesome์˜ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ•˜์˜€๊ณ ,
์ฒดํฌ๋ฌ์„ ๋•Œ ํ…์ŠคํŠธ๊ฐ€ ์˜‡์–ด์กŒ์œผ๋ฉด ํ•ด์„œ ํ•ด๋‹น ํƒœ๊ทธ์— ์Šคํƒ€์ผ๋ง์„ ์ถ”๊ฐ€ํ•˜์˜€๋‹ค.

export default function TodoListItem({title, id, checked,
                                      onRemove, onToggle}) {
  return (
    ...
    <TouchableOpacity onPressOut={onToggle(id)}>
      {checked ? (
       	<Check>
       	  <FontAwesome name="check" color="#000" size={13} />
  	</Check>
	) : ( <UnCheck /> )
       }
    </TouchableOpacity>
	<ItemContent style={checked ? {color: "#444"} :
    	  {color: "#fff"}}>
          {title}
	</ItemContent>
profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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