React 2. JSX를 이용해 HTML 페이지 제작

Steve·2021년 5월 16일
0
post-custom-banner

index.js가 App.js를 index.html로 갖다 박아주세요 라고 해줌.

  1. 태그에 class를 주고싶으면?

    HTML처럼 생긴 JSX
  2. 리액트가 쌩HTML코딩보다 편리한 이유
    리액트의 가장 큰 장점. 데이터 바인딩이 쉬움
    데이터 바인딩 : 자바스크립트 데이터를 HTML에 꽂아넣는 작업
    리액트에서 데이터 바인딩 쉽게 하는 법.

{ 변수명 }으로 코드 끝

function App(){
  var data = '안녕하세요';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div>여기에 꽂고 싶으면?아래처럼 작성</div>
        <div>{ data }</div>
      </div>
    </div>
  )
}

자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런 식으로 길어진다.
src,id,href 등의 속성에도 { 변수명, 함수등 }

JSX에서 style 속성 집어 넣을 때 중괄호

<div style={ 스타일용 오브젝트 }> 글씨 </div>
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨</div>
  

  camelCase작명관습에 따라 속성명을 바꿔준다.
(띄어쓰기가 필요한곳에 대문자)
profile
Front-Dev
post-custom-banner

0개의 댓글