[Styled-Component] style 태그 내 무한 생성되는 클래스 문제

const style 태그 내 무한 생성되는 클래스 문제 = ( Param ) => {

💻 return Result;

// top, left 값이 변할 때 마다 클래스 생성됨
const MoveImg = styled.img<{ $top: number; $left: number }>`
    position: absolute;
    width: 150px;
    height: 150px;

    top: `${props.$top}`px;
    left: `${props.$left}`px;
`

// top, left 값이 변해도 클래스가 다시 생성되지 않음
const MoveImg = styled.img.attrs<{ $top: number; $left: number }>(
    (props) => ({
        style: {
            top: `${props.$top}px`,
            left: `${props.$left}px`,
        },
    }),
)`
    position: absolute;
    width: 150px;
    height: 150px;
`

 

📝 console.log( history )

 사이드 프로젝트를 진행하던 중에 이미지를 특정 시간마다 랜덤 하게 움직여주는 작업이 필요했다. 이미지에 대한 스타일은 Styled-Component를 사용하고 있어 평소 사용하는 대로 props를 받아 사용했다. 의도한 대로 동작하여 문제가 없다고 생각했다.

 

 사이드 프로젝트 팀원들과 회의하면서 진행한 상황을 보여주는데 개발자 도구에서 요소를 살펴봤더니 style 태그 내에 클래스가 계속해서 생겨나는 문제가 보였다. 이미지의 위치 state가 바뀔 때마다 클래스가 생성되는 것으로 보았을 때 state와 연관하여 렌더링 문제라고 예상했다. 그래도 명확한 원인에 대해서 알지 못했다.

 

 다행히 팀원이 해당 문제에 대해서 경험한 적이 있고 문제에 대한 원리를 설명하는 좋은 블로그글을 알려줘서 왜 발생했는지 알게 되었다. Styled-Component는 선언할 때 값을 통해서 해쉬를 생성하고 해당 해쉬를 클래스명으로 사용한다. 따라서 이미지 위치 state가 바뀌면서 스타일 내용이 바뀌기 때문에 해쉬값 또한 새로 생성되게 된다. 그래서 state가 변할 때마다 클래스가 생성되었던 것이다.

 

 해결 방법으로 태그의 inline style을 통해 해결할 수 있었지만 style에 대한 것은 Styled-Component에 정리하는 것이 좋아 보여 attrs 메소드를 통해서 태그의 style을 지정하여 사용하는 방식을 채택하여 문제를 해결했다.

 

 해당 문제는 개발모드에서만 발생하기는 하지만 attrs 메소드를 통해서 태그의 option을 설정하고 한 번에 적용하는 방식을 알게 되었다. 또한 그저 Styled-Component를 사용하기만 했지 원리를 알려고 하지 않았다 이번 기회에 Styled-Component의 원리를 알게 되어서 좋았다.

 

아래 블로그글을 참고하여 문제를 해결했고 Styled-Component의 동작 방식에 쉽게 알려주는 완벽한 글이라고 생각한다.

https://joong-sunny.github.io/javascript/styled-components/

[자바스크립트] 세상에서 제일 쉽고 깊게 알려주는 스타일드 컴포넌트 작동원리

}