[React] CSS Inline Styling for React Elements

Inline Styling 사용하는 법 

 

css 스타일링 할 때 조금 덜 사용되긴 하지만

inline styling도 사용한다.

 

React 기본형이 있다. 

 

 

Hello world 글자색을 빨간색으로 바꾸고 싶을 때 

html 에서 하던 것처럼 스타일링을 

style="color:red"로 하면 에러가 난다

 

 

이유는 문법이 틀려서이다. 

 

1. JSX 파일에서 HTML element에 자바스크립트를 집어 넣을 때는 

자바스크립트가 들어간다는 신호로 중괄호{ }로 꼭 감싸줘야 한다.

 

 

2. 여기에 더해 style properties는 스트링으로 쓰지 않고

자바스크립트 오브젝트 형태로 써줘야 한다. 

그래서 또 중괄호를 해주고 그 { } 안에 key:value 페어로 넣어준다. 

{color: red} 

 

그래서 {{}} 이중 컬리 브레이시스가 된 것을 볼 수 있다.

 

 

3. { }안 스타일을 적을 때 캐멀 케이스로 적어줘야 한다. 

 

 

 

 

 

---

Inline styling을 사용하는 경우

많은 경우 class based styling 사용한다. 

이 말은 css 파일을 따로 만들어 거기에서 스타일을 주는 경우를 말한다. 

 

 

하지만 가끔 inline styling이 편할 때가 있다. 

리액트 element의 스타일을 조건에 따라

그 때 그 때 봐가며 업데이트 하기 편하기 때문이다. 

예를 들어 시간이 오전이면 파란색, 오후면 녹색으로 색을 변경 하기 등등의 경우를 말한다. 

 

 

 

style를 js object 변수로 나타내고 

 

 

 

여기서 메인 ReactDOM.render() 코드는 손대지 않고, 

cumtomStyle 코드만 바꿔서 글자 색을 바꿀 수 있다. 

 

 

customStyle.color 코드를 추가해서 글자색을 바꿔 주었다. 

 

 

---

 

시간에 따라 Good Morning, Good Afternoon, Good Evening 멘트와 글자색 바꾸기 

 

 

우선 현 시간에 따라 글자를 바꿔보자. 

변경이 되는 부분은 { }로 감싸준다. 

현재 오후 5:50경이라 Good Afternoon으로 나왔다.

 

 

시간을 강제로 바꿔서 잘 나오자 보자 

Date() 함수 안에 시간을 적어줘버린다. 

 

 

 

 

글자색 바꾸기 

css에 클래스명 heading으로 기본 스타일을 설정해 놓는다.

css

 

html에도 className을 넣어준다. 

 

 

 

inline css style을 사용한다.

style property를 태그 안에 넣어준다.

we're going to set it equal to a Javascript object which is going to be a custom style. 

 

 

 

 

new Date() 안에 하드코드로 시간을 설정해 본다.

아침으로 바꾸면 

 

 

 

오후로 바꿨을 때 

 

 

import React from "react";

import ReactDOM from "react-dom";

const date = new Date(2022, 1, 1, 13);

const currentTime = date.getHours();

let greeting;

const customStyle = {

color: ""

};

if (currentTime < 12) {

greeting = "Good Morning !";

customStyle.color = "red";

} else if (currentTime < 18) {

greeting = "Good Afternoon !";

customStyle.color = "green";

} else {

greeting = "Good Evening !";

customStyle.color = "blue";

}

ReactDOM.render(

<h1 className="heading" style={customStyle}>

{greeting}

</h1>,

document.getElementById("root")

);