코딩하는 고릴라

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

Styled-components .css 파일을 사용하지 않고 .js 파일 내에서 html요소에 스타일을 적용하기 위해 사용 기존의 .css 파일에서 스타일을 적용하지 않고 각 .js 파일에서 적용하기 때문에, class명이 겹치는 경우 스타일 적용이 중복으로 이뤄지지 않는다. 1. 설치 npm install styled-components 2. 사용 Line 6 - styled-components 임포트하기 Line 8 - styled라는 이름으로 임포트한 styled-components를 이용하여 스타일이 적용된 컴포넌트 ‘Box’ 생성하기 Line 19 - 위에서 만들어진 스타일이 적용된 ‘Box’ 컴포넌트사용 일반 css 파일의 적용 범위 한정하기 (모듈화) .css 파일의 이름을 [컴포넌트명.m..