CSS 여백을 컴포넌트로 관리하는 이유

주말마다 프론트 개발자 친구와 같이 

클론코딩을 하고 있던 중

 

이해하기 어려운 코드를 보게 되었습니다.

 

 

이 사이트는 컴포넌트간 여백을 위 코드처럼 컴포넌트로 관리하는 것입니다.

굉장히 간단하지만 이유를 생각하기 어려웠습니다.

 

왜 저렇게 하는 걸까?

보통은 margin을 주든, padding을 주든지 할텐데

큰 이슈는 아니어서 그냥 저는 css로 margin을 주는 식으로 개발을 진행했습니다.

 

그러던 중에 다른 페이지에서 이전에 활용한 컴포넌트를 재사용하는 일이 있었는데

이전에 사용했던 여백이 컴포넌트 코드에 포함되어 있어서

여백을 수정해야 하는 상황이 발생했습니다.

그래서 제가 했던 방법은 여백을 props로 margin을 조정하여 주게끔 구현하고 있었는데

문뜩 위 코드가 떠오른 겁니다.

 

여백 자체를 컴포넌트로 분리하면 컴포넌트에서 여백 관련 코드를 분리할 수 있게 되고

결과적으로 컴포넌트 재사용성을 향상시킬 수 있다는 장점이 떠올랐습니다.

단점으로는 여백이 html element로 들어가다 보니 html 파일이 커질 수 있다는 것입니다.

복잡한 ui를 가진 페이지를 구현한다면 단점도 무시할 순 없겠지만

충분히 최적화가 가능하지 않을까 생각합니다.

 

향후 프로젝트에서 적극 사용해보면서 장단점을 생각해야겠습니다.