리액트 공부 1

리액트프로젝트에서는 App.js가 메인 페이지이다.

function App(){
 return (
   //여기 코드 작성하면 됨.
 )
}

css는 App.css파일 열어서 집어넣으면 된다.

JSX 문법 1. html에 class 넣을 땐 className

App.js에 짜고 있는건 html이 아니라 JSX이다.
JSX는 html과 사용방식이 비슷하지만, 일종의 자바스크립트이다.
-> 자바스크립트의 예약어인 class는 html에서 사용하는 class와 다른 것이기 때문에 className이라고 써야한다.

JSX 문법 2. 변수를 html에 넣을 때는 {중괄호}

let post = 'HI';
<div>{ post }</div>

--> '데이터바인딩'이라고 부름.

JSX 문법 3. html에 style속성 넣고싶으면

JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야함.

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

++) font-size 처럼 속성명에 대쉬기호를 쓸 수 없다.
대쉬기호 대신 모든 단어를 붙여써야하며, 붙여쓸 땐 앞글자를 대문자로 치환해야한다.