React-native/ To Do App 만들기/리스트 출력하기 && 항목삭제

헤더에 이어서 리스트를 만들어 볼게요.

저번에 FlatList를 활용해 볼건데요.

FlatList 안에 저희들이 만든 컴포넌트를 renderItem Prop에 사용하는 방식입니다.

(///FlatList의 프로퍼티로 renderItem 있는거 아시죠??///)

 

저희는 각 항목에 대한 스타일과 기능을 다른 한쪽의 컴포넌트로 분리해서 구현할겁니다.

./src/components/TodoItem.js를 만들어 주세요.

 

 

 

TodoItem.js

 

 

이 컴포넌트가 FlatList에서 반복적으로 사용됩니다.

***Props로 Item을 넘겨받네요.***

그리고 나중에 TouchableOpacity 에 onPress에 함수를 등록하도록 하겠습니다. 지금은 그냥 넘어갈게요.

 

스타일시트는 따로 설명은 필요 없을거 같네요. marginHorizontal은 양옆에 빈공간을 주는겁니다. 영어는 어느정도 알아야할 필요가 있는거 같아요.

 

 

코드부터 보여드리죠.

 

 

FlatList와 함께 사용하는 자신의 컴포넌트

 

 

 FlatList가 자동으로 key 프로퍼티를 검색합니다. 그래서 따로 작성하지 않아도 괜찮습니다.

어느정도 모습이 갖추어 지는거 같지 않나요?? 아주 기분이 좋네요.

 

자, 마지막으로 리스트 요소를 터치하면 삭제되도록 기능을 구현해 볼게요.

TodoItem에 TouchableOpacity가 있는데요. onPress이벤트를 통해서 기능을 추가해봅시다.

 

 

갑자기 정말 중요한데 setter함수에는 한가지 비밀이 있습니다.

***setter함수에 인자로 익명함수를 넣으면 현재의 State가 자동적으로 익명함수의 인자로 넘어온다는 사실입니다.***

(절대 잊으시면 안됩니다.) 

익명함수는 저번에 다뤘었죠? setter함수 내부에 화살표 함수를 인자로 넣는 것에 익숙해지셔야 합니다.
콜백함수 맞습니다.

코드를 볼까요?

 

 

setTodos에 집중!! 그리고 key를 어디서 받아오는지도 집중!!

 

setTodos()안에 익명함수(화살표함수), 그리고 그 익명함수 안에 prevTodos가 인자로 있어요. 이름은 항상 달라도 상관없는거 아시죠? 그저 세터함수의 약속으로 현재의 스테이트가 자동적으로 인자로 주어지는 겁니다.

우리가 받은 현재의 스테이트를 필터를 통해 걸러냄으로 제거기능을 구현 할 수 있습니다.

filter함수도 다시 화살표 함수를 받네요. prevTodos의 요소를 전부 순회하고 정해진 룰에 따라 걸러냅니다.

key와 key가 서로 다른 요소들만을 남겨놓네요. 고로 key가 같은 항목은 삭제하는겁니다. 

***filter함수는 제거하고 싶은 요소가 아니라, 남기고 싶은 요소에 대한 조건을 명시해야합니다.***

좀 발상의 전환이 필요하죠?

네, 그렇게 작성된 함수를 TodoItem에 Props으로주고요.

---

 

 

 

onPress에 등록!

 

여기에서 PressHandler(item.key) 인자를 주네요.

 

 

 

제거 기능에서 비교하는 두개의 키(todo.key와 key)가 어디로부터 왔는지 잘 살펴보시고 생각해보세요.

PrevTodos와 Item.key가 어디로부터 왔나요? 근원지가 어디죠?

PrevTodos는 setTodos에서 오고 item.key은 todos에서 왔어요! 정말 신기하지 않나요?

 

const [todos, setTodos] = useState();

결국엔 이 두개로 모든 것을 아우르는거죠.

굳이 나누자면 todos는 외부, setTodos는 내부의 정보 같아요. 제 말 맞는거 맞죠?

setTodos는 todos를 조작하는 것만이 아니라 정보를 제공해주기도 한다는 사실!!! 잊지말길 바라요.

복잡했던 머리가 한결 가벼워지 않았나요?

 

아니면 말구...