221112 TIL 바꿔야 할 것 같으면 바꾸자

오늘은 리팩터링은 필요하다고 느꼈을때 바로 해주는게 좋다는것을 깨달은 날이다.

 

Post라는 게시글 세부 정보 컴포넌트를 만들면서 게시글에 필요한 정보들을 PostPage에서 Post 컴포넌트로 props를 전달해주는 구조였는데 props가 점점 쌓여 20개가 넘어가니까 리팩터링할때 엄청난 괴로움을 느꼈다. 

현재 구조가 게시글 세부 페이지에 필요한 정보들을 post의 상위 컴포넌트인 PostPage에서 post의 상태를 관리하는 store를 이용해 상태들을 props로 내려주는 형태(PostPage -> Post)로 만들어져 있다.

그리고 게시글안에 댓글도 들어가는데 댓글은 별도의 컴포넌트로 만들어서 post안에 댓글 컴포넌트도 있기 때문에 최상위 컴포넌트인 PostPage에서 Post컴포넌트에 내려줘야하는 props가 많아질 수 밖에 없었다.

처음에는 props의 갯수가 내가 컨트롤할 수 있는 정도였는데 기능이 추가될수록 필요한 함수나 store에서 가져와야 하는 정보들이 많아져서 감당할 수 없을 정도로 props가 많아져 리팩터링할때 하나하나 찾아서 어떤게 어디서 왔는지 찾는게 너무 힘들었었다.

 

총 25개.... 이 지경이 될때까지 안 고친거 너무한거 아니냐고..

props가 점점 쌓이면서 뭔가 이상함을 느끼긴 했지만 무시하고 계속 진행했었다. 그러다가 내가 컨트롤 할 수 없을 정도가 되었을떄는 리팩터링하기에는 너무 늦은 상황이 되었었고 뒤늦게 전달해주는 props중 관련된것들 끼리 객체로 묶어서 리팩터링을 진행했다.

 

확실히 객체로 묶어서 전달해주니까 가독성이 매우 좋아졌음을 확인할 수 있다.

 

이상함을 느꼈을때 바로 리팩터링을 진행했어야 했는데 그 신호를 무시하다 문제가 눈덩이처럼 커졌을때 고치려고 하니까 바꿔야할것들이 너무 많아져서 리팩터링이 쉽지 않아 고생을 했다.

리팩터링은 바꿔야 될것같은데? 라는 생각이 들면 바로바로 진행하는게 좋다는 것을 느꼈다.