리액트 기본 문법 3개

리액트에서는 html 대신 JSX 라는 걸 씁니다.

주의할 점은 JSX는 HTML처럼 생겼지만, HTML이 아니기 때문에 JSX만의, 지켜줘야 할 문법이 있는데요

 

import logo from './logo.svg';
import './App.css';

let post ='강남 우동 맛집';

function App() {
  return (
    <div className = 'App'>
    <div className ="black-nav">
      <h4 style ={{color: 'red',fontSize : '16px'}}>블로그임</h4>
    </div>
    <h4>{post}</h4> 
    </div>
  );
}

export default App;

여기서 JSX 특징적인 문법 3가지를 찾아보세요~

 

 

 

 

---

1. html 에 class 넣을땐 className

JSX는 일종의 자바스크립트라서

자바스크립트에서 사용하는 예약어인 class 라는 키워드를 막 사용하면 안된다.

class =""를 넣고 싶으면 className 이라고 써야 한다.

 

 

 

 

 

 

2. 변수를 html에 꽂아넣을때는 {중괄호}

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>여기에 저 변수에 있던거 꽂고 싶으면?</div>
      </div>
    </div>
  )
}

옛날 자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런식이었겠지만

리액트에서는 더 쉽게 데이터를 꽂아넣을 수 있습니다

<div>{ post }</div>

이렇게 말이죠!

중괄호 안에 데이터바인딩(데이터 꽂아넣기)하고 싶은 변수명만 담으면 됩니다아

그리고 온갖곳에 {}중괄호를 열어서 변수들을 집어넣을 수 있습니다.

href, id, className, src 등 여러가지 html 속성들에게도 가능하답니다

function App(){

  var data = 'red';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}

여기서는 className에 중괄호+변수명을 사용했죠?

ㅋㅎㅋㅎ

 

 

 

 

3. 하나의 엘리먼트 안에 모든 엘리먼트가 포함(대왕 엘리멘트)

 

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다.

 

 

 

 

 

 

+  html에 style 속성을 넣고 싶으면 style ={} 안에{} 자료형

 

<div style ="color:blue"> 이런걸 넣고 싶으면

JSX 상에서는 style ={} 안에{} 자료형으로 집어넣어야 합니다

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

- {{속성명: '속성값'}}

- 근데 font-size 처럼 원래 css에 대쉬기호가 있자면 쓸 수 없습니다. (자바스크립트에서는 -(빼기) 기호로 인식하기 때문이져)

대쉬기호 대신 모든 단어를 붙여쓰고, 붙여쓸땐 앞글자를 대문자로 씁니다

css파일 열기 구찮을때 씁니다