[TIL] 오랫동안 붙잡고 있었던ㅠ

오랫동안 해결을 못 했던 부분을 오늘 드디어 완성하였다.....
이렇게 보니, 또 어려운 게 아닌 거 같은데 왜 매번 생각이 나질 않는 걸까?ㅠ
해보고 계속해보고 또 해보고... 그래서 내 것으로 만들어서 빨리 코딩 로봇이 되고싶으다 그럼 열심히 좀..

우선 나름 엄청난 수정을 하였다, 결과는 만족! 코드가 훨씬 가독성 있고, 간결해졌기 때문에!
수정을 꽤 많이 해서 어디서부터 어떻게 글을 써내려야 할지 모르겠지만,
그냥 내 머릿속을 정리하자는 마음으로 적어보려 한다.

---

1. 카테고리를 클릭하면, 어떤 카테고리가 클릭되어 있는 상태인지 border-top으로 구분.

2. navBar에서 프로필 아이콘을 클릭하면,
게시물 쪽 포스트들이 렌더 되어야 하고,
마찬가지로, 저장됨 아이콘을 클릭하면,
저장됨 쪽 포스트들이 렌더.

3. 각 카테고리마다 다른 데이터(포스트)를 갖고 있으므로 카테고리를 구분해야 하고, 각각 map을 돌려 포스트를 뿌려줘야 한다.

---

< 1. 카테고리를 클릭하면, 어떤 카테고리가 클릭되어 있는 상태인지 border-top으로 구분 >
< 2. navBar에서 프로필 아이콘을 클릭하면 게시물 쪽, 저장됨을 클릭하면 저장됨 쪽 포스트들이 렌더 되어야 함 >

처음 구현하였을 때, 각 카테고리별로 상태와 클릭 핸들러를 하나하나 지정해주고,
상태가 변할 때도 일일이 지정해줌..
코딩을 모르는 사람이 보기에도 뭔가 이상하다고 생각할 엄청난 하드코딩을 하였었음....ㅠ

현재의 코드는 useState를 하나 사용해서 초기값을 1로 (프로필 페이지) 주었으며,
각 카테고리의 클릭 핸들러에 navigate를 넣어 url을 변경해주었고,

그 변경된 url을 params로 받아와서, 해당 params가 조건에 맞다면 state를 변경해서,
각 카테고리를 클릭하고, IsSelected가 true일 경우 profile_post_clicked로 마크업 되어 border-top이 추가되게 된다.

---

< 3. 각 카테고리마다 다른 데이터를 갖고 있으므로 카테고리를 구분해야 하고, 각각 map을 돌려 포스트를 뿌려주기 >

처음 구현하였을 때, 우선 state를 각각 줬으니 state의 조건에 맞게 또 맵을 각자 돌리고,
그 맵 안에 포스트를 눌렀을 때, 디테일 페이지를 보여주기 위해 Link를 추가해주었고,
각 포스트의 컴포넌트를 따로 만들어서 props를 받았다.

현재의 코드는 params로 받아온 카테고리들을 변수를 하나 생성해서 담고,
하나로 통일한 포스트 컴포넌트를 빼서 카테고리 리스트 전체를 map 돌린 후,
그 통일된 컴포넌트 안에 props를 건네어서 보여주고, 그 안에 링크를 넣는 방식으로 변경하였다.

각 카테고리의 포스트를 가져오는 api는 다르지만,
현재 완료된 API는 게시물과 저장됨 쪽이라
가져온 데이터(reponse)들이 같아 하나로 작성되었고
받아온 props(category)를 사용하지 않았지만,

나중에 동영상, 태그 됨 쪽의 포스트를 가져올 때는
다른 props들도 받아오기 때문에
가져온 props (category)로
조건을 걸어서 구분해줄 예정이다.

---

※ 참고 : https://devbirdfeet.tistory.com/171

※ 참고 : https://basketdeveloper.tistory.com/72