리액트(React)-JSX를 이용한 HTML 페이지 제작

1. 리액트에서 클래스 부여하기

<div className: ""></div>

자바스크립트에서의 class 대신 className 으로 사용해준다.

2. 리액트에서 데이터 바인딩 쉽게 하기

데이터 바인딩이란?

간단하게 말해서
'서버에서 가져온 데이터를 웹페이지에 보여주는 것'

우리가 해오던 데이터바인딩은
document.getElementById().innerHMTL = ""

리액트에서는 간단하게 가능하다.

ex) '서울'이라는 변수명을 가진 데이터를 h4 태그에 넣고 싶어요.

<h4>{변수명}</h4>

위와 같은 모습으로 작성해주면 된다. 태그 안에 중괄호{} 를 넣고, 그 안에 넣고 싶은 변수명을 넣어주는 것.

함수도 <h4>{함수명()}</h4> 가능하다!

---

이미지 가져오려면?

이미지 포함해서 src, id, href 등의 속성도 똑같이 중괄호 안에 변수명 넣어주면 된다.

심지어 className="{ 변수명 }" 도 가능하다.

중괄호로 많은게 가능하다.

---

JSX 에서 style 속성 집어넣기

리액트에서는 이전에 하던 것처럼

<div style="font-size: 16px"></div> 이런거 하면 에러뜬다.

리액트에서는 Object 형식으로 넣어야 한다.

스타일은 무조건 중괄호로 넣어야한다.

style= {Object 자료형으로 만든 스타일}

<div style={{ color: "blue", fontSize: "30px" }}>개발 블로그</div>

중괄호 안에 Object 형식으로 만들어주고, 작대기(-)는 사용이 안되니까
camelCase 작명법에 따라 font-size(X) fontSize(O) 로 해야한다.

위처럼 길게 쓰는것도 귀찮아서 보통 스타일도 className 만들어서 많이 사용한다고 한다.

let post = { color: "blue", fontSize: "30px" };

  return (
    <div className="App">
      <div className="black-nav">
        <div style={post}>개발 블로그</div>
      </div>

해주면 똑같이 style이 적용된다.