인프런 커뮤니티 질문&답변
작성한 질문수
css-in-js 방식에 대해
해결된 질문
작성
·
472
0
질문1. 앞으로의 강의를 css-in-js 방식으로 진행하신다고 하셨는데 실무에서 기존 css 방식으로 사용할땐 코드 작성법을 따로 공부해야 할까요?
질문2. css-in-js 방식을 사용했을때 지원종료는 했지만 아직 ie11버전을 맞추는 고객들이 있는데 그 경우에서도 사용이 가능한가요?
질문3. css-in-js 방식을 사용했을때
- 유지보수나,
- 웹접근성 표준,
- 그리고 일반적으로 id나class 값을 부여하지 않아도 되는 요소에 들어가는 이름의 용량같은 버려지는 용량에 대한 부분에 있어서
기존 css 보다 알맞고?(적절하고?) 좋은가요 아니면 단순히 작성자의 편의를 위해 사용하는 건가요?
답변 2
0
안녕하세요! 승연님!
단순히 커리큘럼을 따라오는 것이 아닌, 이유에 대해서 하나씩 분석하는 자세! 정말 좋아요! ㅎㅎ
굉장히 빠르게 성장하실 것 같네요!
먼저 1번부터 보면,
실무에서 기존 CSS를 사용하는 경우, className을 사용하여 적용하게 됩니다!
적용하는 방식만 다를 뿐, CSS 특성과 값(background-color: red; 등)에 대해서는 CSS나, CSS-IN-JS나 동일하기 때문에 걱정하지 않으셔도 됩니다!
보통 CSS-IN-JS를 사용하지 않는 경우에는 tailwind-css를 고려해 보는 것 같아요!
다음으로 2번을 보면,
CSS-IN-JS 방식을 사용하는 라이브러리는 styled-components, emotion 등 여러가지 라이브러리가 있는데, 현재 수업에서 진행하는 emotion의 경우에는 IE11을 지원하고 있어요!
마지막으로 3번을 보면,
CSS-IN-JS를 사용하는 가장 큰 이유중에 하나는 유지보수 때문이랍니다!
기존 CSS방식은 CSS를 따로 분리하여 관리하였다면, React와 같은 컴포넌트 조립식(레고 조립식) 방식에서는 하나의 컴포넌트에 CSS까지 입혀서 색깔이 들어간 부품으로 관리하기 때문에 유지보수 측면에서 효율적이라고 볼 수 있어요!
이어서 웹접근성은 어떠한 CSS 방식을 채택하느냐 보다는 개발자가 어떻게 적용하느냐에 따른 문제인 것 같아요! 따라서 웹접근성은 틈틈히 공부하셔서 적용해 주시면 될 것 같아요!
마지막으로, 버려지는 용량 부분에 관하여 말씀을 드리면, 기본적인 CSS를 적용하신다 하더라도 React를 사용하시게 되면 className을 직접 입력하셔야 하는 것은 피할 수 없답니다! 또한, 공통적으로 input에만 적용하고 싶은 경우에는 모든 input에 emotion을 적용하시기 보단, emotion에서도 globalStyles를 제공하기 때문에 해당 기능을 적용하시면 됩니다! 그럼에도 불구하고 추가적인 용량 손실이 있다고 한다면, 여기서부터는 유지보수의 관점과 추가적인 용량손실 관점을 비교하여 상황에 맞게 판단해야 할 것 같아요!^^
이러한 이유에서 여러 유명한 서비스들에서 CSS-IN-JS방식을 채택하고 있어요!
그런데, 향후 React18 버전과 Next 13버전에서 대규모 업데이트가 이루어지면서 CSS-IN-JS방식과의 호환에 대한 논란이 있어, 앞으로의 방향은 지켜봐야 할 것 같아요!
0
안녕하세요, 인프런 AI 인턴이에요. css-in-js 방식에 대한 질문에 답변드리겠습니다.
질문1. CSS 방식으로 사용할 때와 css-in-js 방식으로 사용할 때, 코드 작성법을 따로 공부해야 할까요?
CSS 방식과 css-in-js 방식은 코드 작성 방식 자체가 다르기 때문에, 기존의 CSS 방식에 익숙하다면 css-in-js 방식의 코드 작성법을 따로 공부해야 할 수 있습니다. 하지만, css-in-js 방식은 JavaScript를 사용하여 스타일을 작성하므로 코드 관리가 용이하고 모듈화도 쉽게 할 수 있습니다.
질문2. CSS-in-JS 방식을 사용했을 때, IE11 버전과 같은 구형 브라우저에서도 사용이 가능한가요?
CSS-in-JS 라이브러리 중 일부는 IE11과 같은 구형 브라우저를 지원하지 않을 수 있습니다. 하지만, 대부분의 CSS-in-JS 라이브러리는 폴리필(polyfill)이 제공되어 구형 브라우저에서도 사용할 수 있습니다. 다만, 폴리필을 사용하면 번들 크기가 커지고 성능이 저하될 수 있으니, 구형 브라우저 지원 여부를 고려하여 선택하시면 될 것 같습니다.
질문3. CSS-in-JS 방식을 사용했을 때, 유지보수나 웹 접근성 표준, 그리고 클래스를 부여하지 않아도 되는 요소에 들어가는 버려지는 용량과 관련해서 기존 CSS 보다 적절하고 좋은가요? 아니면 작성자의 편의를 위해 사용하는 건가요?
CSS-in-JS 방식은 모듈화가 쉽고 컴포넌트 단위로 스타일을 작성할 수 있어 유지보수가 편리합니다. 또한, 클래스를 부여하지 않아도 되기 때문에 버려지는 용량도 줄일 수 있습니다. 또한, 스타일과 관련된 JavaScript 로직을 함께 작성할 수 있어 코드의 일관성을 유지하고 개발자의 생산성을 높일 수 있습니다. 하지만, 작성자의 편의를 위해 사용하는 측면도 있을 수 있으니 각각의 상황과 요구사항에 맞게 선택하시면 될 것 같습니다.
더 궁금한 사항이 있다면 언제든지 물어보세요! 요청하신 질문에 대해 도움이 되었길 바랄게요.