= 와 : 와 '' 와 {} 와 ``

리드미에서 이미지 넣고 스타일 주는데 순간 width='50%' 와 style='width:50%'의 두 스타일을 지정하는 방식이 머리에서 섞여서 <img width:'50%' ~/> 해놓고 왜 안 되지. 하고 있었다. 😂 생각해보면 스타일을 줄 때 참 많은 경우가 있다. = 할당 연산자를 통해 스타일 속성에 값을 할당하는 방법 style 속성에 css 키값 구조로 스타일을 지정하는 방식. 그리고 따옴표, 중괄호, 템플릿리터럴(백틱) 각각을 사용하면서 값을 할당하는 차이점을 이번 기회에 정리해두려고 한다.

1. = 와 :

= 할당

= 는 값을 변수에 할당할 때 사용한다. 변수 선언 혹은 속성 값을 설정할 때

const color = "red"; 
let size = "large";
<div id="main" className="container"></div>

: 지정

: 는 객체에서 속성에 값을 할당할 때 사용한다.

const styles = {
  color: "green",        
  fontSize: "16px",
};

<div style={{ color: "green", fontSize: "16px" }}>JAMONG</div>

✅ = 는 값 할당 ✅ : 는 키값 매칭

width:'50%' 와 style='width:50%'
전자는 HTML 태그가 지원하는 속성에 값을 지정하는 방식이고 후자는 CSS로 스타일을 지정하는 방식이라 모든 요소에 적용이 가능하다. 태그 속성으로 스타일을 주느냐 style 속성으로 스타일을 주느냐의 차이. 전자는 태그가 기본적으로 제공하는 스타일 속성이 제한적, 후자는 다양한 스타일링을 할 수 있음.

style='width:50%'와 style={{width:50%}}
전자는 HTML의 속성으로 문자열을 받는 방식(여러 속성을 주고 싶을 땐 ; 로 구분), 후자는 React의 속성으로 객체를 받는 방식(, 로 구분).

2. '' 와 {} 와 `` & ${}

'' 따옴표

HTML 속성 값이나 문자열로 표현할 때 사용. + 정적

<div style="color: red;">JAMONG</div> 

{} 중괄호

스타일 객체를 전달하거나 동적인 값을 사용할 때 사용
React의 style 속성은 HTML의 style 속성과 달리 객체를 기대한다.

<div style={{ color: "red", fontSize: "16px" }}>JAMONG</div>

``& ${} 백틱과 템플릿 리터럴

동적 값을 포함할 수 있는 문자열이 필요할 때 주로 사용

const color = "green";
<div style={{ color: `${color}` }}>JAMONG</div>

회고

문득 이런 게 헷갈렸던 근본적인 이유는 리액트를 쓰면서 HTML에서 태그에 스타일링을 주는 방식이 JSX에서 스타일링을 주는 방식과 달라서인 것 같다. 기본적인 개념을 더 잘 익히는 계기가 됐다.