본문 바로가기
Frontend, Client/React

[React] 다양한 CSS 적용 방법

by ggyongi 2024. 7. 20.
반응형

1. Inline Styles

기본적인 방법이지만, 앱이 복잡해질수록 사용하기 어려움

// 방식 1: 직접 기술
return (
	<div style={{ width:"100%", padding: "16px" }}/>
)

// 방식 2: 사전 정의
const containerStyle = {
	width: "100%",
	padding: "16px",
};

return (
	<div style={containerStyle}/>
)

 

2. CSS Modules

.css 또는 .scss 파일을 정의하는 방법

*.scss 파일 작성을 위해선(npm install node-sass)가 필요

  • scss 파일 작성
.container {
	border: solid 1px #aaa;
	border-radius: 20px;
	padding: 8px;
	margin: 8px;
}
  • 사용
import classes from "./CssModules.module.scss"; // 임의의 이름 지정 가능

export const CssModules = () => {
	return (
		<div className={classes.container}/>
	);
};

 

3. Styled JSX

필요 모듈: styled-jsx

npm install styled-jsx
  • 사용: styled jsx에서는 컴포넌트 안에 css을 기술함
export const StyledJsx = () => {
	return (
		<>
			<style jsx>{`
				border: solid 1px #aaa;
				border-radius: 20px;
				padding: 8px;
				margin: 8px;
			`}</style>
		</>
	);
};

 

4. Styled Components

필요 모듈:

npm install styled-components

className에 스타일을 적용한 컴포넌트를 정의.

import styled from "styled-components";

const StyledDiv = styled.div`
	padding: "8px";
`;

사용 예시

<StyledDiv>
	<p>사용 예시입니다</p>
</StyledDiv>

 

5. Emotion

styled components와 함께 인기가 많은 라이브러리.

다양하게 사용할 수 있다는 것이 장점.

필요 모듈:

npm install @emotion/react @emotion/styled

사용

// 방식 1 - 컴포넌트 파일 안에 css를 작성(styled jsx와 유사)
import {jsx, css} from "@emotion/react";

export const Emotion = () => {
	const containerStyle = css`
		border: solid 1px #aaa;
		border-radius: 20px;
	`;
	
	return (
		<div css={containerStyle}/>
	);
}
// 방식 2 - 자바스크립트 객체로 스타일 정의(inline styles와 유사)
import {jsx, css} from "@emotion/react";

export const Emotion = () => {

	//...생략...

	const titleStyle = css({
		margin: 0,
		color: "#aaa"
	});
	
	return (
		<div css={containerStyle}>
			<p css={titleStyle}>Emotion</p>
		</div>
	);
}
// 방식 3 - styled components와 유사
import {jsx, css} from "@emotion/react";
import styled from "@emotion/styled";

export const Emotion = () => {

	//...생략...

	return (
		<div css={containerStyle}>
			<p css={titleStyle}>Emotion</p>
			<SButton>버튼</SButton>
		</div>
	);
};

const SButton = styled.button`
	background-color: #ddd;
	border: none;
	padding: 8px;
`;
 

비전공자 네카라 신입 취업 노하우

시행착오 끝에 얻어낸 취업 노하우가 모두 담긴 전자책!

kmong.com

댓글