[React] CSS 스타일링

리액트의 스타일링 방법은 인라인 스타일, 외부 스타일, 라이브러리 사용과 같은 방법들이 있다.

 

인라인 스타일 (Inline Style)

HTML에서 태그에 직접 삽입했을 때와 동일하게 HTML 태그에 스타일을 삽입하는 방식이다.

일반 HTML과 다른 점이라면, Javascript를 기본으로 하기 때문에 스타일링 할 때 JSON(객체) 형식으로 작성해야 한다. (스타일 구분은 ; (세미콜론)가 아닌 , (콤마)사용!)

- 자바스크립트로 CSS 작성할 때와 마찬가지로, 케밥 형식 (background-size 등)의 속성은 카멜 케이스 (backgroundColor)로 작성해야 한다.

const App = () => {
	return (
    	<p style={{
        	color: "#FFF",
            backgroundColor: "#242424",
        }}>Inline Style</p>
    );
};

export default App;

 

→ 객체 형식이라는 것은 아래와 같이 적용해보면 확실하게 이해할 수 있다!

const App = () => {
	const textStyle = { color: "#0062Fa", border: "1px solid #0062Fa" }
	return (
    	<p style={textStyle}>Inline Style</p>
    );
};

export default App;

 

 

 

외부 스타일 (External Style)

.css 확장자로 된 파일에 css를 작성하고 컴포넌트 파일에 import 시키는 방법이다.

주의사항으로는 .css로 된 파일을 import 하면 import한 컴포넌트에만 적용되는 것이 아니라, 다른 컴포넌트에도 적용된다는 점이다.

이를 해결하기 위한 방법으로는 파일명.module.css 로 확장자를 설정하는 것이 있다. 이 경우에는 태그 보다는 클래스명으로 관리하는 것을 권장한다.

/* common.css */
body {
	color: #424242;
	font-size: 14px;
}

.error { color: red; }

/* style.module.css */
.box {
	color: #686868;
	background-color: #dedede;
    border: 1px solid #a9a9a9;
}

.box .point { color: #846; }

{/* App.tsx */}
{/* .css 확장자 연결 */}
import "./common.css";

{/* .module.css 확장자 연결 */}
import styles from "./style.module.css";

const App = () => {
	return (
    	<>
    		<p>import에 경로를 <span className="error">정확히 입력</span>해야 합니다!!</p>
            <div className={styles.box}>
            	.module.css 확장자는 자바스크립트 문법 사용할 때와 마찬가지로 <span className={style.point}>클래스에 {} (중괄호) 안에 넣어 사용</span>합니다.
                import 하면서 지정한 이름과 클래스명으로 작성한다 === {지정한이름.클래스명}
            </div>
        </>
    );
};

export default App;

 

 

 

라이브러리

tailwind, emotion, vanilla extract 등 다양한 라이브러리가 존재하며, 본인의 상황에 맞춰 선택하여 사용하면 된다.

보통 클래스명으로 css를 제어하기 때문에 css를 어느정도만 할 줄 알아도 사용하기 쉬운 대신, html 코드가 지저분..복잡해 보일 수 있다.

 

대표적인 라이브러리인 Tailwind CSS 설치 방법 링크 : https://tailwindcss.com/docs/guides/vite