2023. 7. 20. 14:51ㆍ기술 창고/React
JSX 문법에 스타일링 하는 것은 기본 Javascript와 다르지 않습니다.
다만 약간의 차이점이 있을 뿐입니다.
JSX 문법에 스타일링 하는 방법에 대해서 간단하게 알아보겠습니다.
기본 스타일링
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/JSX"></script>
</body>
</html>
index.html 에는 React JSX 를 import 하고 있습니다.
여기서 일반 Javascript를 import 하는 것이라면 type을 "text/javascript" 라고 했겠지만, JSX 이기 때문에 type은 "text/JSX"입니다.
index.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<h1 className="heading" contentEditable="true">
My Favourite Foods
</h1>
<ul>
<li>Bacon</li>
<li>Jamon</li>
<li>Noodles</li>
</ul>
</div>,
document.getElementById("root")
);index.js 는 React JSX 로 구성되어있습니다.
React DOM을 통해 태그 내용들을 렌더링하고 있습니다.
h1 태그에 className 속성이 붙어주었습니다.
기존의 javascript에서는 class 속성과 동일합니다.
다만 JSX에서는 className 으로 사용됩니다.
contentEditable 속성은 렌더링된 태그의 내용을 노출된 브라우저 화면에서 바로 편집할 수 있도록 하는 속성입니다.
여기서 한 가지 추가로 알 수 있는 사실은 JSX 에서 렌더링 되는 태그들의 속성들을 설정해줄 때는 카멜케이스를 사용한다는 것입니다.
HTML 속성 document : https://www.w3schools.com/tags/ref_standardattributes.asp
style.css
.heading {
color: red;
}style.css 는 기존의 HTML에 스타일을 지정해준 방법과 똑같습니다.
id 혹은 class, 태그의 종류에 따라 스타일을 지정해주면 됩니다.
JSX 태그 속성에 js 를 포함시켜 스타일링
JSX 렌더링 태그 내용들에 js 변수들을 {중괄호}를 통해 넣는 것이 가능합니다.
이뿐만이 아니라 JSX 태그 속성에 js 변수들을 이용하여 스타일링 하는 것이 가능합니다.
index.js
import React from "react";
import ReactDOM from "react-dom";
const img = "data:image/jpeg;base64,/9j/4AAQSkZJRgSnJyk=";
ReactDOM.render(
<div>
<h1 className="heading" contentEditable="true">
My Favourite
</h1>
<img src={img}/>
</div>,
document.getElementById("root")
);img라는 js 변수에 인터넷에서 떠돌아다니는 이미지 파일 주소를 넣어주었습니다.
이제 JSX img 태그의 src 속성에 {중괄호}를 사용하여 해당 변수명을 넣어주면 해당 위치에 있는 이미지가 출력되게 됩니다.
JSX 태그 Inline 스타일링
이번에는 Inline 방식으로 스타일링하는 방법에 대해서 알아보겠습니다.
Inline 방식은 태그에 직접적으로 style 속성을 넣어 해당 태그에 스타일을 바로 넣는 방식입니다.
기본 HTML 을 사용하면 굳이 Inline을 사용하지는 않지만 JSX를 사용한다면 Inline 방식 또한 좋은 스타일링 방식으로서 채택할 수 있습니다.
index.js
import React from "react";
import ReactDOM from "react-dom";
const customStyle = {
color: "red",
fontSize: "20px",
border: "1px solid black"
}
customStyle.color = "blue";
ReactDOM.render(
<div>
<h1 style={{color: "red"}}>Hello World!</h1>
<h1 style={customStyle}>Hello World!</h1>
</div>
, document.getElementById("root"));JSX로 렌딩된 h1 태그를 보면 첫 번째 요소에는 style 속성을 넣어주고 직접적으로 color 스타일을 설정해주었습니다.
JSX에서 Inline 방식의 스타일을 지정할 때는 중괄호가 두 개여야 하며, 안에 들어가는 스타일 내용은 마치 json 형식처럼 만들어주어야 합니다.
두 번째 요소는 앞서 JSX에 js 요소를 넣어서 스타일링할 수 있는 특성을 살려 스타일을 지정해준 json 형식의 js 요소를 만들어 style 속성에 넣어줌으로서 스타일을 넣어주었습니다.
Inline 방식을 사용하면 js 요소에 넣은 스타일을 바로 찾아서 변경해줄 수 있습니다.
'기술 창고 > React' 카테고리의 다른 글
| [React] React App 프로젝트 로컬 환경 생성 세팅 (Window) (0) | 2023.07.21 |
|---|---|
| [React] Import, Export 사용법 (0) | 2023.07.21 |
| [React] React Component (컴포넌트) (0) | 2023.07.20 |
| [React] React란? (0) | 2023.07.20 |
| [React] S3 파일 불러오기 (0) | 2023.07.11 |