React 기본 작성법

〰 className=""

React에서 class="" 를 넣고 싶으면 className="" 이라고 사용해야한다

<div className="class명">
	<div>영역</div>
</div>

❗ 자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 리액트 기본 내장 문법이라고 생각하시면 됩니다.

❗ JSX도 일종의 자바스크립트기 때문에 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하시면 안됩니다.

〰 JSX에서 데이터바인딩하기

데이터바인딩은 자바스크립트 데이터를 HTML에 넣는 작업을 뜻합니다.

function App(){
  var data = '데이터 바인딩';
  return (
    <div className="App">
      <div className="black-nav">
        <div>제목/div>
        <div>데이터 바인딩 하고싶은곳</div>
      </div>
    </div>
  )
}

중괄호안에 데이터바인딩하고 싶은 변수명만 담으시면 됩니다.

function App(){
  var data = '데이터 바인딩';
  return (
    <div className="App">
      <div className="black-nav">
        <div>제목</div>
        <div>{ data }</div>
      </div>
    </div>
  )

〰 HTML에 스타일을 직접 넣고 싶으면

<div style={ 스타일용 오브젝트 }> 글씨 </div>

❗ JSX 상에서는 무조건 { } 오브젝트로 바꿔서 넣으셔야합니다.

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

❗ camelCase 작명 관습에 따라 속성명을 바꿔준다