React 컴포넌트 스타일링 방식
| • 일반 CSS | import 명령어를 사용해서 'css 파일을 불러내서 사용하거나 style 속성에서 사용함. 즉, 평범한 CSS 사용방식 기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 함 |
| Sass | • Syntactically Awesome Style Sheets • CSS 전처리기 종류 중 하나 • 복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해준다. |
| Styled Components | • JavaScript 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리 • 컴포넌트 기반의 설계 방식 |
| Tailwind CSS | • utility-first 개념으로 만들어진 CSS 프레임워크 • 클래스 내에 이미 완성된 유틸리티한 이름을 붙여 HTML 내에서 개발하는 방식 • 대부분의 웹 개발은 HTML이 고정되어 있고, 테마를 제공하는 솔루션 방식이 아닌 프론트가 직접 HTML을 수정하기에 채택된 방식. |
기본적인 CSS
| • 기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 함 |
| • 이름 클래스 형태인 App-logo나 BEM 네이밍인 app_title-primary 같은 방식이 주로 사용됨 |
| • 물론, 기존처럼 지시자를 활용한 CSS 방식도 사용하고 있음 |
| 하지만, 주로 사용중인 방식은 아래 처럼 CSS Module 형식을 사용하는 것이다. |
| • css 파일명을 컴포넌트명.module.css로 생성 |
| • js파일에서 import해서 객체형태로 사용 |
SASS/SCSS 방식
| • Syntactically Awesome Style Sheets |
| • 수많은 CSS 처리 방식 중에 하나로 복잡한 작업을 쉽게 할 수 있도록 도와주는 장치 |
| • 스타일 코드의 재활용성과 코드의 가독성을 높여 유지 보수를 더욱 쉽게 해주기 위해 개발된 방식 |
| • 모든 CSS 처리 방식은 전부 표준 CSS로 컴파일 과정에서 전환되는 과정을 거치게 됨. |
| • .sass는 세미콜론(;)과 중괄호를 사용하지 않은 파이썬과 비슷한 형태로 스타일을 정의하는 것이다. |
| • 반면, .scss는 기존의 .css 파일과 비슷한 형태에 변수나 결합(태그 안에 태그)가 더해진 형태 |
| • sass 와 .scss 모두 변수를 선언할 때는 $를 앞에 붙여줘야 한다. |
SASS/SCSS 사용하기
1. npm install sass 명령어로 관련 모듈 패키지를 다운로드 받는다.
2. sass, scss든 관련 문법 형태에 맞춰서 파일을 작성한다.
3. 작성한 파일을 사용할 html 태그가 있는 react(jsx 파일)에 import 한다.
SASS/SCSS의 활용법 5가지
| 1. 변수 사용 |  |
| 2. 연산 |  |
| 3. 믹스인(함수화 같은 느낌 ) |  |
| 4. 중첩 |  |
| 5. 확장 |  |
Styled-Components
Styled Components는 NPM(Node Package Manager)를 통해 관리되는 패키지이기 때문에, 간단한 명령어를 통해 설치할 수 있다.
설치가 성공적으로 이루어졌다면, package.json 파일에 디펜던시가 추가되어 있을 것이다.
Styled-Components 의 기본 문법
1. Styled Components를 사용하기 위해서는 가장 먼저, 아까 설치한 styled-components 패키지에서 styled를 import 해야 한다.
import styled from "styled-components";기본적으로 html의 모든 태그들에 스타일을 적용할 수 있다. 적용 방법은 styled.tagName과 같이 작성한 뒤, 적용하고자 하는 CSS 스타일을 작성하면 된다.
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 15vh;
`;
const BoxOne = styled.div`
background-color: #cf6a87;
width: 100px;
height: 100px;
`;
const BoxTwo = styled.div`
background-color: #574b90;
width: 100px;
height: 100px;
`;
const App = () => {
return (
<Wrapper>
<BoxOne />
<BoxTwo />
</Wrapper>
);
};
Styled-Components를 활용해서 할 수 있는 것들
1. Styled-Components 에 변수를 도입하는 법
const Box = styled.div`
background-color: ${(props) => props.bgColor};
width: 100px;
height: 100px;
`;
const App = () => {
return (
<Wrapper>
<Box bgColor={"#cf6a87"} />
<Box bgColor={"#574b90"} />
</Wrapper>
);
};Styled Components를 이용하여 박스 두 개를 성공적으로 화면에 나타냈는데, 뭔가가 아쉽다.
BoxOne, BoxTwo는 각각 배경색을 제외하고는 중복된 코드를 가지고 있기 때문이다.
다행히도 Styled Components에서는 props를 통해 각각의 컴포넌트마다 원하는 속성을 적용할 수 있게 해준다.
한마디로 중복되지 않은 부분을 변수화해서 처리하는 것이다.
2. Styled-Components의 상속
같은 태그에 공통된 정보가 있을 때 상속을 사용하여, 공통된 부분을 재활용하여 테그를 만들 수 있다.
const Circle = styled.div`
background-color: ${(props) => props.bgColor};
width: 100px;
height: 100px;
border-radius: 50%;
`;
border-radius 속성을 제외하고는 잎서 설계했던 Box 컴포넌트와 다를게 없다.
Styled Components에서는 이러한 코드의 중복을 막기 위해 html의 태그 뿐만 아니라, Styled Components를 통해 만든 컴포넌트도 재정의할 수 있다.
차이점이라면 styled(ComponentName)와 같이 컴포넌트 명을 괄호 안에 넣어줘야 한다는 것 정도다.
const Circle = styled(Box)`
border-radius: 50%;
`
const App = () => {
return (
<Wrapper>
<Box bgColor={"#cf6a87"} />
<Box bgColor={"#574b90"} />
<Circle bgColor={"black"} />
</Wrapper>
);
};
3. as 속성을 사용해 type만 변경하기
const App = () => {
return (
<Wrapper>
<Box bgColor={"#cf6a87"} />
<Box as="button" bgColor={"#574b90"} />
<Circle bgColor={"black"} />
</Wrapper>
);
}만들어놓은 Styled-Component를 다른 곳에서 버튼으로 사용하고 싶을 수 있다. 하지만 해당 컴포넌트가 div 태그로 정의되어 있고, 원래의 태그와 동시에 사용하면서 중복 코드는 만들고 싶지 않을때 사용하면 용이하다. 그럴 때는 간단하게 컴포넌트 태그에 as 속성을 넣어 type만 바꾼다.
as 속성만 추가했는데 성공적으로 button 태그로 바뀐 것을 확인할 수 있다.
4. 태그에 특정 속성 추가
const Input = styled.input.attrs({ required:true })`
background-color: orange;
margin-right: 5px;
`;required 속성을 가진 input 태그가 여러 개 필요할 경우,
각각의 태그마다 required 속성을 추가하는 것은 매우 번거롭고 귀찮다.
만약 수정할 일이 생긴다면, 하나씩 변경하는 것은 더더욱 귀찮을 것이다.
Styled Components에서는 html 태그의 속성도 지정할 수가 있다.
required 속성이 성공적으로 적용되었다! 만약에 여러 속성을 주고 싶다면, 다음과 같이 사용하면 된다.
const Input = styled.input.attrs({ required:true, maxLength:10 })`
background-color: orange;
margin-right: 5px;
`;
4. 태그에 애니메이션 속성 추가
import {keyframes} from "styled-components";Styled Components를 통해 애니메이션을 넣기 위해서는 keyframes를 import 해야 한다.
import {keyframes} from "styled-components";
const CircleAnimation = keyframes`
0% {
background-color:red;
}
33% {
background-color:green;
}
66%
{
background-color:blue;
}
100% {
background-color:red;
}
`;
const Circle = styled(Box)`
border-radius: 50%;
animation: ${CircleAnimation} 3s linear infinite;
`;
const App = () => {
return (
<Wrapper>
<Circle bgColor={"red"} />
</Wrapper>
);
};
주의해야 할 점은, 애니메이션을 컴포넌트보다 먼저 정의해주어야 성공적으로 애니메이션이 적용된다. 순서가 바뀐다면 아래와 같은 에러 메세지를 볼 수 있을 것이다.
'CircleAnimation' was used before it was defined no-use-before-define
5. Styled-Component는 SCSS의 확장형
const Box = styled.div`
background-color: ${(props) => props.bgColor};
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
span {
background-color: black;
}
`;
const App = () => {
return (
<Wrapper>
<Box bgColor={"#cf6a87"}>
<span>😊</span>
</Box>
</Wrapper>
);
};
Styled-Component 내에 자식 태그를 선택하는 가상 선택자를 사용할 수 있다.
Box 컴포넌트 안에 성공적으로 span이 삽입되었다.
실제로 span 위에 마우스를 올렸을 때(hover), 배경 색상을 바꾸기 위해서는 두 가지 방법이 있다.
// 1번 방법
const Box = styled.div`
생략...
span {
background-color: black;
}
span:hover {
background-color: white;
}
`;
// 2번 방법
const Box = styled.div`
span {
background-color: black;
&:hover {
background-color: white;
}
}
`;
큰 차이는 없지만, 2번 방법이 관리하기 편할 것이다.
Tailwind CSS 란?
| tailwindcss는 utility-first를 개념으로 만들어진 CSS framework이다. |
| 개발자가 클래스 이름을 통해 직접 스타일을 HTML에 적용할 수 있게 해준다. |
| 접근 방식은 매우 모듈화되어 있으며, 디자인의 일관성을 유지하면서, 커스텀 디자인을 빠르게 구현할 수 있는 유연성 |
Tailwind CSS의 장점
| 클래스의 이름을 고민하지 않아도 된다. | 부트스트램처럼 이미 지정되어 있는 클래스 이름을 가져다 쓰면 되기에 네이밍에 대한 고민을 하지 않아도 된다. 더 이상, CSS에 의미 있는 클래스 이름을 짓고자 하는 고민과 네이밍 표기법을 생각하지 않고, 스타일에만 집중하여, 로직을 작성하면 된다는 얘기다. |
| 쉽게 설정 가능한 반응형 웹 | 별개의 CSS를 찾아서 추가할 필요 없이 스타일에 맞는 클래스를 찾아서 HTML에 적용시켜주면 되기에 반응형 구현이 수월해지는 장점이 있다. |
| 반응형 웹의 구분점 지정이 간편 | // tailwind.config.js 📂 module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, screens: { sm: '465px', md: '768px', lg: '1024px', xl: '1640px', }, }, }; |
| 화면을 이동하며 개발할 필요 없음 | Styled Component와 마찬가지로 HTML 태그가 있는 파일에서 개발을 진행하기에 CSS 수정을 위해 화면을 옮겨다닐 필요가 없다. |
| 프레임이 존재하는 CSS | 이미 정해져 있는 프레임을 사용하기에 거의 모든 태그에 일관된 스타일을 적용할 수 있으며, 이미 vscode에선 자동완성을 도와주는 패키지도 존재하기에 쉽게 태그 작성이 가능하다. |
Tailwind CSS의 단점
| 복잡한 형태를 가지는 프로그램의 경우, 스타일이 추가되면 될 수록 코드의 가독성이 크게 떨어진다. |
| 아무래도 고정된 프레임이 있다보니까, 공식 문서를 보면서 클래스 이름을 찾아서 개발하거나 외워야 할 것 있다. |
| Styled-Component 처럼 함수를 통해 계산된 변수를 받아 태그의 형태를 바꾸는 등의 작업을 하기는 어렵다. |
Tailwind CSS
를 사용하는 방법
| 1. Tailwind CSS를 npm 패키지를 이용해 설치한다. |
| npm install -D tailwindcss postcss autoprefixer |
| 2. Tailwind CSS와 관련된 초기화 파일을 생성해준다. |
| npx tailwindcss init -p |
| 3. 초기화과 완료되면 'tailwind.config.js' 파일이 생성되며, 해당 파일에 템플릿 경로를 설정 해준다. |
 |
| 4. Tailwind CSS를 사용할 것라는 걸 읨하는 지시문을 index.css 파일에 추가한다. |
 |
| 5. 보다 편한 CSS 작성을 위하여 IntelliSense를 설치한다. |
| VS Code extension인 IntelliSense를 설치하면 훨씬 빠르고 쉽게 스타일을 적용할 수 있다. 자동완성 기능, 오류나 잠재적인 버그를 강조해주고 클래스 이름에 hover 시 해당 CSS를 보여주는 등 tailwindcss를 사용한다면 기본으로 사용하길 추천한다. |
 |
| 6. 기준점이나 색깔 명 등을 tailwind.config.js에서 작성한다. |
 |
| 7. 기본 스타일 값을 오버라이딩하여 작성하지 않도록 extend 객체 안에 정확히 넣어주어야 한다. |
 |
| 8. 이제부터는 공식 문서를 참고해서 CSS 코드를 HTML 태그 내에서 작성해주면 된다. |
 |
| 공식 홈페이지 : color - Typography - Tailwind CSS |
| 9. 물론 일반적인 CSS 파일 내에서 Tailwind CSS로 코드를 작성한 다음, 클래스의 형태로 태그에 추가하는 방식, 무리 없이 동작이 가능하다. |
 |
Reference
Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log
Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log
일관된 디자인을 유지하면서도 쉽고 빠르게 스타일링하기 | 이번 블로그에 도입한 Tailwind CSS 를 소개하고자 한다. 마음에 쏙 드는 CSS 프레임워크로 인라인 스타일을 사용…
wonny.space
'국비지원 공부 정리 > React' 카테고리의 다른 글
| Context API와 Redux (0) | 2025.04.03 |
|---|---|
| React Router (0) | 2025.04.02 |
| Custom Hooks (0) | 2025.04.01 |
| useCallback()과 useReducer() (0) | 2025.04.01 |
| Hooks - 기본 설명, useMemo (0) | 2025.04.01 |