레이블이 클린코드인 게시물을 표시합니다. 모든 게시물 표시
레이블이 클린코드인 게시물을 표시합니다. 모든 게시물 표시

6.17.2020

React 컴포넌트에서 많은 스타일 설정을 넘겨 주어야 할 때 쓸 수 있는 방법 1 (Feat. JavaScript Class)

최근에 클린코드에 대한 관심을 가지고 포트폴리오 프로젝트 하나를 리팩토링 중이다.

그 과정에서 하나의 컴포넌트에 너무 많은 props를 넘겨주는 상황이 있었다. 컴포넌트를 사용할 때마다 스타일 요소를 지정해서 사용할 수 있게 하려고 그렇게 작성하였다. 하지만 함수도 그렇고, 컴포넌트도 그렇고 전달인자는 되도록이면 3개를 넘지 마라는 조언이 있었다. 따라서 인자의 성질에 따라 config와 styles라는 인자로 나눴다. 가장 많이 차지하는 style요소들을 어떻게 넘겨줄까 고민했다. 객체로 만들어 일일이 호출할 때마다 부르는 것은 비효율적인 것 같았다. 함수를 만들어 조정할까 했는데, 그것도 뭔가 깔끔해보이지 않았다. 한 일주일동안 머리를 싸매면서 코드를 썼다 지우고, 썼다 지웠다. 결국 폭풍 구글링을 해보다가 class를 활용해보면 어떨까 하는 아이디어를 얻었다.

Share: