React는 JSX라는 Javascript를 확장한 문법이다.
html과 비슷하게 생겼으면서도 Javascript의 기능으로 구성되어 있기 때문에 평소에 만들던 html과는 조금 다른 부분이 있다.
그 중에서 style 관련된 차별점에 대해 정리해 보는 글 😮
🪄 참고로 벨로그 내 코드 사용할때도 javascript가 아닌 jsx로 사용해야 정상적으로 태그에 색상이 들어간다.
💡 css 연결 방법
import './App.css'; // css 경로
html상에서는 css를 걸고 싶을때 link를 해서 가져오는 반면 여기서는 import를 해 온다. import를 선언 후 '' 안에 css 경로를 적어주면 된다.
💡 class 주는 방법
<div className="App"></div>
html상에서는 class를 사용하고 싶다면 class="className"을 사용하지만 여기서는 className="className"으로 사용해야 한다.
그 이유는 Javascript 문법에 class라는 문법이 있기 때문에 혼동 방지 차 다르게 준다고 한다.
id는 기존과 동일하게 id="idName"으로 주면 된다.
💡 inline-style 주는 방법
<h4> style={{fontSize : '20px'}}>블로그</h4>
inline-style로 주는 방법은 조금 독특한데,
html 상에서는 해당 태그에 style="color:#000" 이런식으로 주었지만 jsx 문법에서는 객체 형태로 넣어야 한다는 것!
그리고 font-size와 같은 '-'가 있는 것들은 카멜 기법을 사용해서 넣는다.
카멜 기법을 사용하는 이유로는 '-'가 Javascript 빼기 연산자이기 때문이라고 한다.
만약 폰트 색상을 #000, 사이즈는 20px로 주고 싶다면 아래와 같이 작성하면 된다.
style={ {color:'#000', fontSize:'20px'} } 
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨