scss vs styled-components 차이점 사용한 이유

가장 많이 사용되고 있는 SCSS 와 styled-components을 비교해보기 위해서입니다.
SCSS의 가장 큰 장점은 중첩 기능이었습니다. 셀렉터를 중첩시킨다던지, 속성을 중첩시키거나 상위 요소를 참조하는 것이 가능합니다. 따라서 코드가 길어지면 길어질수록 가독성 측면에서 훨씬 좋다는 것이 느껴졌습니다. 하지만 CSS in CSS 방식이다보니 js 파일과는 분리 되어 있기 때문에 컴포넌트에서 CSS 파일을 왔다 갔다 하면서 시간을 소비하게 되는것이 번거로웠으며, 클래스명에 대한 고민은 여전하였습니다.

styled-components는 css in js 방식이기에 시간적으로 소비 되는것을 줄여주며 * 클래스명에 대해 고민하는 문제를 덜어주면서 기존의 컴포넌트라는 개념이 지니고 있는 재사용성이라는 장점 또한 갖고 있다. 컴포넌트의 속성인 props 기능을 활용할 수 있어,컴포넌트에서 넘겨주는 값을 스타일링시에 받아서 활용 가능합니다.

부가 설명

 <Banner
            /onClick/={increaseIndex}
            /bgphoto/={makeImagePath(data?.results[0]?.backdrop_path || “”)}
          >
</Banner>

const Banner = styled.div<{ bgphoto: string }>`
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px; 
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
    url(${(props) => props.bgphoto});
  background-size: cover;
`;

성능적인 측면에서는

• css in js 방식이기에 해당 컴포넌트가 렌더링될 때에만 해당 스타일 정보를 읽는다. 이 부분이 장점처럼 보일 수 있지만 한편으로는 해당 컴포넌트가 렌더링 될 때마다 스타일 정보를 가져와야 한다는 의미이다.
• 만약, 굉장히 동적인 이벤트가 많은 웹사이트가 있다면 그만큼 컴포넌트의 상태값 전환도 활발하며, 컴포넌트 인터렉션이 활발할수록 자주 렌더링될 것이다. 그만큼 스타일 정보도 그때그때 다시 읽어와야 한다는 것이다. 그에 반해 css in css는 html문서에서 이미 읽혀져있는 상태이기 때문에 처음에는 스타일 정보를 가져오는 양이 많더라도 그 이후에 추가적인 렌더링은 상대적으로 적다.