[TIL] 20210819 북컬렉션 리팩토링

북 컬렉션 설명

1. 제목있음

2. 이미지 넣을 수 있음

3. 설명 넣을 수 있음

4. 책을 선택하고 책 마다 추천 이유를 적을 수 있음

5. 선택한 책 삭제 할 수 있음

6. 서버로 form data로 보냄

 

 

 

 

기존의 로직

1. 책을 하나 선택하면 리덕스에 저장됨

selected_Books 라는 배열에

title, image, author, isbn이 저장되고

collection_contents라는 배열에

isbn, book_description이 저장됨.

위의 배열은 화면에 책 정보들을 뿌려주기 위해 저장해놓은 것들이고

collection_contents는 서버에게 보낼 형식으로 만들어준것임.

 

2. 책 더 추가하기를 누르면 리덕스에 있는 more_select라는 변수를 true로 바꿔주고

책을 더 추가할 수 있는 카드가 나온다.

 

3. x표시를 누르면 리덕스에서 삭제된다.

 

4. 책 마다 추천이유를 적으면 리덕스에 collection_contents에 저장된다.

추천이유를 적은 책의 isbn을 찾아서 같으면 book_description을 수정하는 형식이다.

 

 

 

문제

이렇게 짜면 북컬렉션을 만들때는 괜찮지만 수정하기를 할때 로직이 엄청나게 복잡해지는 문제에 직면했다.

수정하기를 할때는 서버에서 받아오는 값들을 뿌려주어야하는데

받아온 값들 중에서 책정보들만 또 따로 모아서 리덕스에 따로 저장해놓아야만

x표시를 하면 사라지고 책을 더 추가하면 추가가 될 수 있다.

그런데 위에서 만든 함수들은 딱 만들기에만 적합하게 되어있고 확장성이 부족하였다.

처음에는 서버에서 받아온 책에 관련된 값들만 저장하는 배열을 만들어서

서버에서 받아오자마자 저장하고, 또 원래 있던 selected_books에도 저장하고, collection_contents에도 저장했다.

삭제를 누르면 그 세 배열에서도 다 삭제가 되어야했다.

그리고 지금 서버에서 한번도 리뷰를 쓴 적이없는 책의 경우 isbn이 내려오지 않는 문제가 있었다.

그러면 서버에서 내려오는 데이터 구조가 달라지기 때문에 그럴때를 대비해서 다른 배열과 구조를 같게 하기 위해 또 저장할때 구조를 요상하게 바꿔줘야하는 문제가 생겼다.

대체 무슨 소리인지 나말고는 아무도 이해못할 것이다.

그정도로 복잡하고 이상한 구조가 되었다.

그래서 이건 아니다! 싶었다.

 

 

 

 

 

해결(작성시)

1. 책 하나를 선택하면 selected_Books에 저장한다. (리덕스)

화면에 뿌려주기 위한 정보  image, title, author

그리고 서버에 보낼 내용 isbn, book_description이 포함되어있음

처음 선택했을때는 book_description이 아무것도 없을테니까 ""로 저장

 

여기서 map을 돌려서 CollectionBookCard에 하나씩 넘긴다

CollectionBookCard가 바로이거임

 

 

2. 삭제를 누르면 selected_Books에서 삭제됨

3. 추천이유를 적으면 selected_Books에 있는 book_description에 저장됨

4. 서버에 보낼때는 isbn이랑 book_description만 보내야함

for문 돌려서 contents를 만들어줌

원래는 리덕스에 collection_contents배열을 더 만들어줬었는데

배열이 하나씩 늘어날수록 수정할때 로직이 매우 복잡해지므로 selected_Books에서 빼오는 것으로 바꿨음

 

 

** 여기서 좋은점은 서버에 isbn과 book_description이외에 selected_Books에 저장된 값을 바로 보내는 것이 좋겠다.

이것을 백엔드분들한테 요청했더니 그냥 보내도된다고 한다.

그래서 저부분을 없앴다.

 

 

(수정시)

1. 상세보기불러올때 저장된 책들을 selected_Books에 저장한다.

2. 나머지 로직들은 똑같음!