이번 글에서는 React에서 사용되는 App.tsx 파일의 내용을 자세히 살펴보겠습니다. 특히, React 컴포넌트에서 className이 무엇인지, 어떻게 사용하는지에 대해 초보자도 쉽게 이해할 수 있도록 설명하겠습니다. 이 파일은 React 컴포넌트를 정의하고, 다양한 스타일링 방법을 보여주는 예제를 포함하고 있습니다.
가보자고!! Let's Go!!!
코드와 설명
1. 기본 React 컴포넌트
const App = () => {
return (<h1>App Component</h1>);
};
export default App;- 이 코드는 React에서 가장 기본적인 형태의 컴포넌트를 정의합니다. App이라는 이름의 컴포넌트를 선언하고, 이 컴포넌트는 h1 태그로 "App Component"라는 텍스트를 반환합니다.
- 마지막 줄에서는 이 컴포넌트를 export default로 내보내서 다른 파일에서 사용할 수 있게 합니다.
2.JSX 없이 React 컴포넌트 생성
import { createElement } from "react";
const App = () => {
return createElement(
"div",
null,
createElement("h1", { id: "title" }, "Hello World"),
createElement("h2", null, createElement("p", null, "P Tag"))
);
};
export default App;- 여기서는 JSX를 사용하지 않고, React.createElement를 통해 DOM 요소를 생성하는 방법을 보여줍니다.
- 이 방법은 JSX를 사용할 수 없는 환경에서 유용하며, 컴포넌트의 구조를 보다 명확하게 표현할 수 있습니다.
- 인라인 스타일 적용
const App = () => {
return (
<>
<h1 style={{
color: "red",
fontSize: "50px",
border: "1px solid black",
}}>
인라인 스타일 적용 예제
</h1>
</>
);
};
export default App;- 이 코드에서는 인라인 스타일을 사용하여 h1 태그의 스타일을 지정합니다.
style속성을 사용해 객체 형태로 CSS 스타일을 직접 지정할 수 있으며, 이를 통해 컴포넌트 내에서 동적으로 스타일을 설정할 수 있습니다.
- 외부 CSS 파일 적용과
className사용
import "./App.css";
const App = () => {
return (
<>
<h1>App Component</h1>
<p className="title">Sample Text</p>
</>
);
};
export default App;- 이 코드에서는 외부 CSS 파일을 불러와서 스타일을 적용하는 방법을 보여줍니다.
- import "./App.css";를 통해 외부에 정의된 CSS 파일을 가져오고, JSX에서 className 속성을 사용하여 해당 스타일을 적용할 수 있습니다.
- 여기서 p 태그에 className="title"을 설정했습니다. className은 HTML의 class 속성과 동일하게 작동합니다. 즉, CSS 파일에서 title 클래스에 정의된 스타일을 이 요소에 적용할 수 있습니다.
className이란?
className은 HTML의 class와 동일한 역할을 합니다. 그러나 React에서는 class가 JavaScript의 예약어이기 때문에, class 대신 className을 사용합니다.- CSS에서 클래스는 여러 요소에 동일한 스타일을 적용하는 데 사용됩니다. className을 사용하면, CSS에서 정의된 스타일을 React 컴포넌트에 쉽게 적용할 수 있습니다.
예를 들어, App.css 파일에 다음과 같은 스타일이 정의되어 있다고 가정해보겠습니다:
.title {
font-size: 20px;
color: blue;
text-decoration: underline;
}이 경우, className="title"을 가진 p 태그는 자동으로 위의 스타일을 적용받아, 파란색 글씨로 크기는 20px, 밑줄이 그어진 텍스트로 표시됩니다.
- CSS 모듈과 조건부 클래스 적용
import classNames from "classnames";
import styles from "./App.module.css";
import Second from "./components/Second";
const App = () => {
return (
<div className={classNames(styles.container, styles.main)}>App</div>
);
};
export default App;- 이 코드에서는 CSS 모듈을 사용하는 방법을 보여줍니다. CSS 모듈은 컴포넌트 단위로 스타일을 적용할 수 있게 해주는 방법으로, 클래스 이름이 고유해지기 때문에 스타일 충돌을 방지할 수 있습니다.
import styles from "./App.module.css";를 통해 모듈화된 CSS 파일을 불러옵니다.classnames라이브러리는 여러 개의 클래스를 조건에 따라 적용할 때 사용됩니다. 이 예제에서는 styles.container와 styles.main 두 클래스를 className으로 적용하고 있습니다.- 이렇게 하면, App 컴포넌트의 div 요소에 container와 main 스타일이 동시에 적용됩니다.
아... 정리하는 것도 힘드네,, 현타 ON
이번에 살펴본 App.tsx 파일을 통해 React 컴포넌트에서 className을 활용하는 방법을 깊이 이해할 수 있었습니다. className을 사용하면 HTML에서 사용하는 클래스와 동일하게 CSS 스타일을 적용할 수 있으며, React의 JSX 문법에서도 매우 자연스럽게 사용할 수 있습니다. 특히, CSS 모듈과 classnames 라이브러리를 함께 사용하면 조건부로 스타일을 적용하거나, 스타일 충돌을 방지할 수 있어 실전 프로젝트에서 매우 유용할 것입니다.
또한, JSX 없이 React.createElement를 통해 컴포넌트를 생성하는 방법, 인라인 스타일과 외부 CSS 파일을 사용해 스타일을 적용하는 방법을 배웠습니다. 이러한 다양한 스타일링 기법을 통해 더욱 세련된 웹 애플리케이션을 개발할 수 있을 것으로 기대됩니다.
아... 정리하는 것도 힘드네,, 현타 ON
