# CSS Module
스타일 간섭을 방지하기 위한 styled components와 css module
컴포넌트 파일에 css 파일을 import하여 사용하는 기존의 일반적인 스타일링 방식은 스타일의 스코프가 해당 컴포넌트에만 국한되지 않는다. 큰 프로젝트에서 수많은 개발자들이 같은 코드에서 작업하고 있을 때, 동일한 css 선택자가 다른 의도임에도 중복해서 사용될 수도
[SeSAC DT 과정] REACT - CSS Module, Styled-component 사용하기
css 클래스명의 중복을 막아주는 css-module 과 css 관련 리액트 라이브러리인 styled-component 에 대해서 학습해보자. 리액트
리액트 컴포넌트에 CSS 적용하기 - 많이 사용하는 4가지 기술 정리
리액트 프로젝트에서 컴포넌트 구조를 어떻게 짜는지가 유지보수에 중요하듯 컴포넌트의 스타일링 또한 리액트의 큰 축으로서 CSS를 어떤 구조로 관리할지 관건입니다. 구조화를 돕는 4가지 기술을 소개합니다. SASS (pre-processor) SASS와 같은 CSS 전처
[React] 13. 컴포넌트 스타일링 (2)
1. CSS Module ✍ CSS Module은 CSS를 불러와서 사용할 때 크래스 이름을 고유한 값 형태로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다. \* 즉, [파일이름]\[클래스이름]\[해시값] 형태로 생성 사용 방법은 .modul
리액트에서 css 작성하는 4가지 방법
인라인: 특별한 이유가 없는 한 인라인으로 작성하지는 않는다고..기존의 css파일 사용하기 (index.css, App.css 같은 것)create-react-app으로 프로젝트 작성하면 생성되는 index.css, App.css 파일에 작성할 수 있는데 이 경우 클래
[TIL] 2020/11/10
Today, I Learned react 개발할 때 css 클래스 이름이 겹치면 어디서 겹쳤던지 항상 갑자기 문제를 일으키고는 했는데, 그러한 부분을 일절 발생하지 않게 해주는 모듈을 찾았다 => CSS module + 팀 프로젝트를 할 때도 다른 사람과 클래스
[React] Style Component
1️⃣ Sass Install Use dynamic class name classnames library * How to use * ...Rest Props When you wanted to further hand off these items (i.e., thin
컴포넌트 스타일링
일반 CSS : component를 스타일하는 가장 기본적인 방식Sass : 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있게 해준다.CSS module : 스타일을 작성할 때 CSS클래스가 다른 CSS 클
Conquer CSS in Code
CSS in JS는 너무 JS에 편파적이다. 새로운 용어로 CSS in Code를 쓰자. CSS in Code가 뭐가 좋냐고? 이리 와서 이 글을 봐요 그대.
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components
리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 요즘은 조금 불편하다고 느껴져서 잘 사용하고 있지 않고 있습니다.