목록트러블 슈팅 (1)

코딩하는 고릴라

[FE] Props를 활용한 Styled-components 트러블 슈팅

🦍 Why프로젝트 진행 중, props로 전달된 값에 따라 div의 크기를 조절하는 스타일을 Styled-components를 활용해 작성했습니다. props로 전달되는 값은 수시로 변화하는 값이었으며, 이에 따라 무수히 많은 클래스가 생성되었고 이는 성능적 이슈를 일으켰습니다. 🐕 What기존에는 스타일드 컴포넌트가 어떤 원리로 동작하는지 이해하지 못했습니다. 이 문제를 해결하기 위해 크롬 관리자도구에서 DOM 요소를 확인해 봤을 때, 계속해서 클래스명이 변화하는 것을 통해 props가 변할 때 마다 새로운 클래스를 생성하고, 이를 적용시키는 과정이 반복됨을 확인했습니다. 따라서 계속되는 클래스 생성을 막으면 되지 않을까 생각했습니다. 문제 상황// 문제가 됐던 기존 코드// 스타일 코드export..
Project/Bridgetalk 2024. 5. 5. 17:18
이전 Prev 1 Next 다음