[ 리액트의 장점 ]

• 데이터 바인딩
  데이터 바인딩이란, 서버에서 받아온 데이터를 자바스크립트에 저장한 다음 HTML코드에 전송해 표시해주는 것.

리액트에서는 이 부분이 되게 간결해진다.

ex)

리액트 X

javascript

let posts = "강남 고기 맛집";
document.getElementById().innerHTML = ''?

HTML

<div>
  자바스크립트 코드를 받아와서 화면에 띄워주는 코드
</div>

리액트 O

javascript

let posts = "강남 고기 맛집";
fuction 함수() {
  return 100
}

HTML

<!-- HTML -->
<div>
  { posts } <!-- { 변수명 / 함수명 } -->
  { 함수() }
</div>

• 이미지 import

이미지 파일명 : logo.svg

import logo from './logo.svg';
// 이미지파일을 logo라는 변수에 담아줌.
<div className = { logo }
<!-- 클래스명도 중괄호 가능 (src, id, href) -->
<img src = { logo } />

[ className ]

JavaScript에는 이미 class가 존재하므로, className으로 객체 클래스 이름을 지정해줘야한다.

css 적용 시, css에 작성 후, className에 css속성에 작성한 class 이름을 className에 넣어줍니다.

[ style ]

HTML에서는

<div style="font-weight:60px; fontSize=150%";></div>

JSX에서는

<div style={ { color:'blue', fontSize:'30px' } } > </div>

style속성을 집어넣을 때 style={ 오브젝트 자료형으로 만든 스타일 }
(font-Size가 안 되는 이유는 font에서 Size를 빼는(-) 걸로 인식되므로 바꿔줘야합니다.)

기존 대시(-)를 사용하던 언어는 대시(-)를 기준으로 카멜표기법을 사용합니다.