[React_study] 리액트에서 레이아웃 만들 때 쓰는 JSX 문법

* JSX 문법

- 리액트에서는 html 대신 JSX라는걸 사용한다.

- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적은 자바스크립트 문법은 아니다.

- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

* JSX 문법 1. html에 class를 넣을 때는 className

• 스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" "
• 원래 리액트환경에서 <div>를 만들고 싶으면 자바스크립트로 React.createElement('div', null) 이러식으로 어렵게 코드를 짜야한다.
• 그래서 JSX라는 언어를 대신 사용한다. JSX는 html과 사용방식은 비슷하다.
• JSX는 일종의 자바스크립트여서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하면 안된다.
  • 자바스크립트 Class생성자함수로 인식된다. 따라서 className이라고 써야한다.

 

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

• 변수를 선언 및 값을 할당해주고 중괄호를 이용해서 변수를 사용한다.
• 아래의 예시 처럼 사용한다.
• href, id, className, src 등 여러가지 html 속성들에도 가능합니다.
• [참고] 변수에 있던걸 html에 넣는 작업을 데이터바인딩이라고 합니다. 

function App(){

  const post = 'Hello my Blog';
  
  return (
    <div className="App">
      <div className="nav-bar">
        <div>Blog</div>
        <div>{post}</div>
      </div>
    </div>
  )
}

function App(){

  const post = 'Hello my Blog';
  const blogClass = 'blog-title';
  
  return (
    <div className="App">
      <div className="nav-bar">
        <div className={blogClass}>Blog</div>
        <div>{post}</div>
      </div>
    </div>
  )
}

 

 

* JSX 문법 3. 변수를 html에 style속성을 넣고 싶다면

• JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야한다.
• { 속성명 : '속성값' } 이렇게 넣으면 됩니다. 
• font-size 처럼 속성명에 대쉬기호를 쓸 수 없습니다.
• 대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야합니다. 
  • camelCase로 작성해야한다.

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