귀염뽀짝한 react-native에게 조심스레 다가가기

아니야 내려치지 않을 거야. 왜냐하면 리액트 네이티브는 귀염뽀짝하기 때문이다. 인풋에 비해 아웃풋이 뭔가 많아 보인다. 레이아웃도 특별히 크게 (아직까지는) 신경 쓸 거 없고 앱이라는 프리미엄이 붙어서 뭘하든 신기하고 설레고 좋다. width 1024px만 하다가 이런 친구들과 함께하니 어릴 때 매일 가지고 놀던 장난감을 우연히 발견해 추억에 잠기는 기분이다. 그럼 귀염뽀짝한 react-native와 꿈과 희망의 세계로 떠나보자.

세팅

달력 라이브러리 + react native + redux라는 이름만 들어도 가슴이 뛰는 조합이다.

App.js

'

기본적인 투두 앱을 만드는 구조와 비슷하다.

todoContainer.js

달력 자체가 컨테이너라서 달력 라이브러리에서 제공하는<Agenda>로 감싼다. 그리고 중요한 props들이 있는데 items와 renderItem

• renderItem

실질적으로 투두 아이템을 렌더하는 친구들. 인자로 item을 받는데 flatlist를 배울 땐 인자를 비구조화 해야한다고 하던데 여긴 안 해도 되네? 오히려 비구조화면 에러가 뜬다!!!

• renderItem에 인자로 들어오는 item

todoInput.js

changeInput, addTodo 두 개의 액션으로 input값을 저장한다.

input창이 화면 아래에 있어서 인풋을 클릭하면 모바일 자판이 올라면서 인풋창을 가리게 되는데 검색해보니 KeyboardAvoidingView 컴포넌트로 해결한다고 한다. 이걸 써서 해결은 됐지만 padding을 건드는 친구라 input창이 올라올 때마다 달력이 망가진다!!!!

해결 해야할 것

• KeyboardAvoidingView 없이 input창 키보드에 반응하게 만들기

todo add

크나큰 문제에 봉착했는데<Agenda/> 라는 달력 라이브러리에서 제공하는 컴포넌트를 사용하고 거기에 renderItem을 이용해 투두를 뿌려야 하는 상황에서 달력에서 원하는 데이터 포맷이 있다는 것이다.

이렇게 날짜를 기준으로 투두가 날짜에 묶여 정렬이 된다.

전체 배열에 날짜가 key가 되어야 하고 다시 그 안에 투두를 추가해야하는 것이다! 이것을 리덕스로 만들려고 하니까 머리가 깨지다 못해 비루하고 한심한 내 실력에 자존감이 우수수 떨어져서 귀염뽀짝한 네이티비를 싫어할 수도 있기 때문에 리덕스에서 받은 list를 변환시켰다.

날짜 찍기

밀리세컨드로 변환한currentTime을 선언하고 toISOString을 이용해서 원하는 방식으로 날짜를 포맷할 수 있다.

배열 형태 변환

이렇게 배열에 투두가 들어오면

정말 말도 안 되는 로직이지만 언제는 말이 되는 로직을 짰냐 라는 생각으로 뿌듯하게 만들었다. 일단 빈 배열을 하나 선언하고 for in을 돌려서 date 값만 뽑는다. 그리고 이미 date를 키로 하는 배열이 있는지 없는지를 찾아서 넣어주면 된다. 그리고 <Agenda/>의 items에 바뀐 배열을 집어 넣는다!

휴지통 아이콘 넣기

네이티브에서 아이콘 넣기가 좀 까다로운데 나는

import Icon from 'react-native-vector-icons/Ionicons';

이 친구를 이용했다.

이렇게 넣어주면 된다!

마지막 고비

이제 이쁘게 아름답게 잘 add가 되는데 삭제를 누르면 다 삭제가 된다. 당연하다 왜냐면 이중 배열에 있는 객체 하나의 id값을 잡아야 하는데 아무 생각 없이 원래 하던 대로 클릭하면 id값 잡아서 filter를 때렸기 때문이다. 당연히 안 될 것을 알았지만 혹시나 어떤 천운에 의해 잘 작동하리라 희망을 가졌다. 아무런 고민이 없으면 결과도 없다.

문제를 해결하자

포맷한 "2020-12-26", "..." 이렇게 date 키를 가진 배열에 접근해 원하는 아이템만 filter할지 아니면 row한 list에 접근할지 고민을 해보았다.

일단 포맷한 배열에 접근해보려고 한다. 내가 생각한 것은 for문으로 객체 순회를 하며 date가 같은 배열을 찾아서 그 배열을 filter한다. 해보자!

• 실패

  • 원인은 포맷한 배열에 접근하기 위해서 클릭한 아이템이 속한 date값도 같이 가져와야 하는데 이미 포맷을 했기 때문에 date값이 item 배열에 있지 않아서 투두를 클릭했을 때 date값을 가져올 수가 없다. 일단 너무 복잡하기도 하니 그냥 하던대로 하자..

• 알고보니 리덕스 문제

아직 리덕스를 잘 몰라서 이렇게 해도 되는지 모르겠지만 filter 배열을 복사하고 todoList를 바꿔주었다.

완성