[React] - JSX문법 배워보기

React에서 사용하는 JSX문법 3가지

실습을 위한 BLOG 상단 제작

(App.js
import './App.css';

function App() {
  return (
    <div className="App">
         <div className="black-nav">
         	 <h4>React Blog</h4>
      	</div>
    </div>
  );
}

export default App;

(App.css)
.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
### }

Html에 class를 넣을땐 className으로 선언

평소 사용하던 html, css와 다르게 스타일을 주기 위한 class명을 넣을때
class = " "가 아닌 className = " "을 사용하여 작성합니다.

      <div className="black-nav">
         	 <h4>React Blog</h4>
      	</div>

(위에 적용했던 css와 같이 적용하여 실행할시)

변수를 HTML에 넣을때는 중괄호{ }로 묶기

function App(){

  let post = '게시물1';
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>React Blog</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}
  
export default App;

변수 = 길고 복잡한 자료를 한 단어에 저장해서 쓸 수 있게 하는 문법

자바스크립트의 변수선언 방식 var, let, const키워드 중 하나를 이용해 제작합니다.
선언한 변수를 이용하는 방식은 중괄호안에 적으면 끝입니다.

이러한 과정을 데이터바인딩이라고 합니다

html에 style 속성을 넣을때는 지켜야 할것

JSX상에서 style 속성을 div안에 넣는다면
style={ } 안에 { } 자료형 식으로 코드를 작성해야 합니다

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

• { 속성명 : '속성값' } 이렇게 넣으면 됩니다.

• font-size 처럼 속성명에 대쉬기호를 쓸 수 없습니다.

• 대쉬기호 대신 모든 단어를 붙여써야하며 여쓸 땐 앞글자를 대문자로 치환해야합니다.