컴포넌트 잘짜기란?

저번 프로젝트를 하면서 컴포넌트를 잘짜는데 아쉬움이 많이 남아서 회고를 해보려고 한다.

컴포넌트 구성에 관한 고찰

이번에는 컴포넌트 구성에 아쉬움이 남는다. 동영상 리스트 페이지는 컴포넌트화를 하지 않았다. 커뮤니티 페이지 같은 경우는 잘 해놨지만 댓글은 댓글리스트에서 CRUD를 다 처리해버려서 아쉬움이 남는다.

아쉬움이 남는 이유는 상태관리, 동작, 렌더링 등등 모든것을 한 컴포넌트에서 실행하니까 코드가독성이 너무 안좋고, 한 컴포넌트에서 너무 많은 것을 실행하고 있다는 생각이 들어서이다. 짤때는 이보다 편할 수 없었지만 죄책감이 드는 코드이다.

근데 Hooks를 이용하다보니 기능들을 한 컴포넌트에 넣어놓는것이 정말 편하긴했다. 필터링 되는것을 바로바로 페이지에 표현할 수 있었기때문이다. UI적인 부분은 따로 분리해서 재사용할 수 있게 했으면 좋았겠다는건 변함이없다 .

그리고 컴포넌트를 짤 때 '상태변경시에 렌더링되는 컴포넌트의 범위를 잘 생각해서 분리해준다면 페이지를 구성할때 큰 도움이 되는구나' 라는 것을 알게 되었다.

결론

결국 UI측면의 요소들은 모듈화해서 재사용하는 것이 옳고, 기능을 담당하는 컴포넌트들을 렌더링에 따라서 나누면 되겠구나 라는 생각이 들었다.

하지만 이는 Prop와 Redux를 고려하면 또 생각해야할 것들이 많아지는데 이는 다음글에서 서술하겠다.