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

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

React-Native

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

์ด์ „ ํฌ์ŠคํŒ…์ธ '์ถ”๊ฐ€๊ธฐ๋Šฅ ๊ตฌํ˜„'์— ๋น„ํ•ด์„œ ์‚ญ์ œ๊ธฐ๋Šฅ์€ ๋น„๊ต์  ์ฝ”๋“œ์–‘์ด ๋งŽ์ง€ ์•Š๋‹ค.
์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๋‚ด์šฉ๊นŒ์ง€ ๋“ค์–ด๊ฐ€๋‹ค ๋ณด๋‹ˆ ์ถ”๊ฐ€๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ธ€์ด ๊ธธ์—ˆ์ง€๋งŒ,
๋ฐ”ํƒ•์ด ๋‹ค ์žกํ˜€์žˆ๋Š” ์ƒํ™ฉ์—์„œ ์‚ญ์ œ๊ธฐ๋Šฅ์€ ์ •๋ง ์†์‰ฌ์› ๋‹ค.

ํ•  ์ผ ์‚ญ์ œ ๊ธฐ๋Šฅ๐Ÿ—‘

๊ธฐ์กด ์˜ˆ์ œ๋“ค์— ๋‚˜์™€์žˆ๋Š”, ํœด์ง€ํ†ต ๋ชจ์–‘์˜ ์•„์ด์ฝ˜ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์„œ ์‚ญ์ œํ•˜๋Š” ๊ธฐ๋Šฅ ๋ง๊ณ 
๋‚˜๋Š” ์กฐ๊ธˆ ๋…ํŠนํ•˜๊ฒŒ Swipeable ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.
์•„์ดํฐ์— ๋งŽ์ด ์žˆ๋Š” ๊ธฐ๋Šฅ์ธ๋ฐ, ์–ด๋–ค ํ•œ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐ€์–ด์„œ ์ˆจ์–ด์žˆ๋Š” ๊ธฐ๋Šฅ์ด ๋‚˜ํƒ€๋‚  ์ˆ˜ ์žˆ๋„๋ก
ํšจ๊ณผ?๋ฅผ ์ฃผ๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค.
๊ทธ๋ž˜์„œ ๋‚˜๋Š” ์‚ญ์ œ๊ธฐ๋Šฅ์„, ๋ชฉ๋ก ์˜ค๋ฅธ์ชฝ์—์„œ ๋‚˜ํƒ€๋‚˜๊ฒŒ ํ•˜๋„๋ก ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋‹ค.

์šฐ์„  App.js์—์„œ onRemove๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•œ ํ›„ <TodoList>์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•œ๋‹ค.

const onRemove = id = e => {
  setTodos(todos.filter(todo => todo.id !==id));
};
...
<TodoList todos={todos} onRemove={onRemove} />
  ...

์ด๋Š” ๊ฐ ์•„์ดํ…œ์˜ ๊ณ ์œ  id๋ฅผ ๋ฐ›์•„์„œ ํ•ด๋‹น ์•„์ด๋””๋ฅผ ๊ฐ€์ง„ ์•„์ดํ…œ์„ ์ œ์™ธํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋งŒ๋“œ๋Š” ํ•จ์ˆ˜๋‹ค.
์ดํ›„ TodoList.js์—์„œ onRemove ํ•จ์ˆ˜๋ฅผ ๋ฐ›์•„ <TodoListItem>์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•œ๋‹ค.

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

TodoListItem.js์—์„œ๋Š” ์ „์ฒด ์ฝ”๋“œ๋ฅผ <Swipeable>์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ์‹ผ ํ›„
์‚ญ์ œ ๋ฒ„ํŠผ์„ ์œ„ํ•œ <DeleteButton>์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ 
renderRightActions๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋งŒ๋“  <DeleteButton>์ปดํฌ๋„ŒํŠธ์—์„œ
onPress์ด๋ฒคํŠธ์— onRemove ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๋ฉด ๋œ๋‹ค.

export default function TodoListItem({title, id, checked, onRemove}) {
  const DeleteButton = ({onPress}) => {
    return (
      <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
        <DeleteText>์‚ญ์ œ</DeleteText>
      </TouchableOpacity>
    );
  };
  return (
    <Swipeable
    renderRightActions={()=> <DeleteButton onPress={onRemove(id)} />}>
    ...
    </Swipeable>	
profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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