레이블이 clean code인 게시물을 표시합니다. 모든 게시물 표시
레이블이 clean code인 게시물을 표시합니다. 모든 게시물 표시

6.17.2020

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

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

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

Share:

6.11.2020

[웹 기초] 클린코드(Clean Code)의 개념과 주의해야 할 포인트(Feat. React에서 구체적인 실천 방법)

클린 코드라는 말은 전부터 이곳 저곳에서 들어본 적이 있다. 공부해야지 하면서도 그동안 미뤄왔었는데, 최근에 어떤 계기로 코드를 깔끔하게 쓰는 것이 매우 중요하다는 것을 절감했다. 그래서 어제부터 오늘까지 클린 코드에 대해 구글링으로 조사했다. 이 글에서는 조사한 것들을 요약 정리하려고 한다. 내가 배운 것을 까먹지 않기 위해 복습하는 것이기도 하고, 다른 분들도 참고하면 좋을 것 같아서 블로그 글로 적는다.

Share: