공통 컴포넌트 구조

이번 프로젝트에서 공통 컴포넌트를 중점적으로 맡게 되었다. 저번에 기획서의 전체적인 구조를 살펴보지않고, 필요한 화면의 기획서만 쪼개서 살펴보다 보니, 공통 컴포넌트가 props가 변동되고, 스타일이 이중으로 적용되는 문제점이 발생되었다. 이 점을 해결하고자 기획서를 하나 하나 살펴보면서 어떤 스타일이 필요한지, 어디에서 이 컴포넌트를 사용하는지 구체적으로 파악을 하였다.

그래서 내부에서 스타일을 관리할 수 있게 정리하였고, props도 최대한 줄여보려고 노력했다. 이 컴포넌트 구현하면서 느꼈던 점은 구현을 빨리하려고 최소의 부분만 적용한 컴포넌트를 만들었는데, 처음부터 기획서를 꼼꼼하게 살펴보면서 공통 컴포넌트를 구현해야겠다는 점을 알게 되었다.

이렇게 꼼꼼하게 살펴봐도 예상치 못한 곳에 새로운 기능이 추가될 수 있지만, 그 빈도가 현저히 떨어지기 때문이다. 이번에 아예 싹 다 뜯어고쳐서 더 필요성을 많이 느꼈던 거 같다.

상태 관리

상태 관리는 언제나 고민이 많이 되는 부분인 거 같다. 어떤 부분까지 상태관리를 해야하는지, 이 상태관리를 어디서 적용하면 좋을지. 이 상태를 props로 계속 내려줘도 되는건지….

useEffect를 사용할 때, 값이 변경되면 어떻게 하면 다시 fetch하고 리렌더링을 일어나게 하면 좋을지, 너무 잦은 리렌더링을 하면 안 좋은데 등등 여러가지 생각이 많이 들었던 상태관리였던 거 같다.

자세한 내용은 아래 링크를 첨부해두었습니다.

https://github.com/codesquad-members-2023/issue-tracker/pull/58

이번 주 회고 요약

😍 좋았던 점

컴포넌트를 구체적으로 만드니깐, 다른 곳에서 활용할 수 있어서 좋았습니다.

😅 아쉬웠던 점

머지 충돌이 어떻게 하면 안 일어날지 고민중입니다.
컴포넌트에 props로 어느 정도까지 줘야하는지 고민이고, 스타일 컴포넌트 설정을 컴포넌트 안에서 하는게 좋은지, 윗 상단에서 스타일을 설정하면 좋을지 고민이어서, 어느 정도 룰을 가지고 스타일을 설정해야겟습니다.
컴포넌트 기능을 좀 더 세부적으로 구현하는게 좋을 거 같습니다.
시간이 얼마 남지 않아서 더 많은 기능을 구현하고 싶습니다.

🤔 개선해볼 수 있는 것

스타일 컴포넌트에 color 빼고는 props를 주는 것을 최대한 자제할 예정이고, 중복 될 거 같은 스타일은 상단에서 줄 수 있게 리펙토링 할 예정입니다.
state를 당장은 주지 않더라도, 어느 곳에서 주면 좋을지 생각해보고, 따로 룰을 정리해봐야겠습니다.
주말 동안 이번 주차 때 했던 컴포넌트를 리팩토링하는게 좋을 거 같습니다.