1. 로그인
퍼스트 프로젝트에서는 7개의 페이지가 있었고 정보들은 App.js에서 관리하고 있었다
navbar 안의 LoginUser에서 로그인, 로그아웃, 유저정보가 필요했기 때문에 main.js 에서 데이터를 사용하지 않는데도 props로 3단계씩 내려줘야 했다
한 페이지만 해당이 되었다면 문제가 없었을 것이지만
7개의 페이지가 있었고 navbar가 들어가는 5개의 페이지에 동일하게 반복되고 있었다
(사진이 LoginUser부분)
퍼스트 프로젝트에서는 코드를 작성할 수 있었던 시간이 6일로 너무 짧았기 때문에 props drilling 을 어떻게 해결할 수 있을까라는 생각도 하지 못하고 그냥 넘어갔다
끝나고 나서 어떻게 해결 할 수 있을까 찾아봤고
useContext라는 방법이 있다는 것을 알게되었고 사용방법을 정리해뒀다 -> 링크
파이널 프로젝트가 끝나고 나서 코드의 상태관리를 리팩토링 했다
로그인 로직은 useContext를 사용해 props drilling을 없애줬다
2. 컨텐츠
그리고 컨텐츠를 보여주는 로직이 좀 복잡했다
상태관리 라이브러리를 사용하지 않는 상태에서
컴포넌트가 나눠져 있기 때문이었다
기획시 나는 세개가 같은 컴포넌트에 들어있다라고 생각했고
같이 프론트를 맡은 분은 전부 다 나눠져 있다 라고 생각해서
selectBtn, filter, thumbnail 세개의 컴포넌트로 나누어 놓으셨다
기획시 더욱 더 꼼꼼하게 기록을 해야겠다고 느낀 때 였다
처음에는 시간이 없어서 그대로 진행을 했지만
끝나고 나서 보니 상태가 어디에서 어떻게 바뀌는지 찾기도 알아보기도 힘들었다
그래서 세개로 나눠져 있던 컴포넌트를 하나로 합치고
App.js에 있던 게시물 정보를 요청하는 부분도 Contents로 내려서
한 컴포넌트에서 다 관리 할 수 있도록 만들었다
이부분도 useContext를 사용해 볼까 생각 해봤지만 컴포넌트를 합치는 방법이 더 효율적이라고 생각했다
조금은 더 알아보기 쉬운 코드가 된 것같지만 아직 부족한 부분이 많으므로 리팩토링은 계속..⭐️
