일단 데이터의 흐름이 중요합니다. PostForm에서 dispatch(addPost(text))를 하게되면
reducer의 post.js에서 addPost로 데이터를 받고,
동시에 saga의 post.js에서 ADD_POST_SUCCESS로 데이터를 처리하게됩니다.
ADD_POST_SUCCESS가 되면 reducer post.js에서 ADD_POST_SUCCESS가 실행되고, mainPosts 부분이 변경되면서 글이 작성되게 됩니다.
이런 데이터 흐름을 알고 진행하면 됩니다. 화면에 그려지는 부분과 데이터가 처리되는 부분을 명시하면서 작성을 해야합니다.
Encountered two children with the same key, `2`.
이런 이슈가 나오는거는 dummyPost의 id가 2로 고정되어있어서 첫번째 게시글의 id가 2, 두번째, 세번째 게시글의 id가 2로 나오기때문입니다. id(key)값이 겹쳐서 반복문이 인식을 못하게되어서 문제인데요. 그래서 게시글의 순서도 바뀌고, id를 랜덤하게 만들어줄 수 밖에 없습니다.
이럴 때 유용한 라이브러리가 shortid 입니다.
shortid.generate()를 이용하면 랜덤하게 id값을 만들어주기 때문에 유용하게 사용하실 수 있습니다.
리액트의 불변성은 바뀌는 것들은 빼고, 유지되는 부분들은 참조하게 되어야 메모리를 절약할 수 있습니다. 하지만, 위 그림처럼 코드양이 많아져 제대로 하고 있는지 알수 없습니다. 따라서, immer라는 라이브러리를 통해 확인해볼 수 있습니다. immer는 다음 포스팅 때 복습하겠습니다.
UserProfile에 게시글을 작성하면 작성게시글 수가 올라가는 기능을 넣을 수 있습니다. 하지만, post, user 리듀서는 각각 post와 user만 관리하고 있습니다. 리듀서(리덕스)의 원리는 액션을 통해서만 값을 변경할 수 있기때문에 이 원리를 이용하여 기능을 만들면 됩니다. user.js에 액션을 만들어주고,
saga의 post.js에서 ADD_POST_TO_ME를 실행하게 한 후,
user 리듀서에서 id 데이터를 이어받아 게시글이 작성되면 me.Posts.length로 게시글이 추가되는 코드를 작성할 수 있습니다.
게시글 작성도 똑같이 흐름을 생각하면서 작성해주면 되고,
게시글을 지울 때는 filter를 이용해서 지워주면 되는데, 유의해야할 점은 filter((v) => v.id !== action.data)
!== 를 제대로 써줘야 하는 점입니다. !== 대신 ===를 사용하면 내가 지우려고 한 부분을 제외한 나머지를 삭제하니 주의해야합니다.
'NodeBird 복습 > React' 카테고리의 다른 글
| react nodeBird 1-14(faker, 인피니트 스크롤링 적용하기) (0) | 2021.04.29 |
|---|---|
| react nodeBird 1-13 (immer 적용하기) (0) | 2021.04.28 |
| react nodeBird 1-11 (리덕스 사가 이펙트) (0) | 2021.04.21 |
| react nodeBird 1-10(리덕스 사가 이해하기) (0) | 2021.04.19 |
| react nodeBird 1-9(해시태그 만들기) (0) | 2021.04.19 |
