리액트 2강 : JSX 문법 (3가지)

- 터미널에서 npm start 입력 후 시작

문법 1. className

- class 넣을 땐 className이라고 작성해야 됨 (html에서 처럼 class라고 사용하면 안됨)

function App() {
  return (
    <div className="App">
    <div className="black-nav"> <<<
      <h4>블로그임</h4>
    </div>
    </div>
  );
  }

문법 2. JSX : 변수 넣을 땐 {중괄호} 사용

(데이터 바인딩은 { } 중괄호 )

* 실무: 서버에서 데이터 가져와서 <html> 사이에 넣어달라고 함

- post라는 변수를 h4에 넣을 때, 간단하게 { } 중괄호 사용하여 넣을 수 있음.

function App() {

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

  return (
    <div className="App">
    <div className="black-nav">
      <h4>블로그임</h4>
    </div>
    <h4> {post} </h4>  <<<
    </div>
  );
}

- id = "강남 우동 맛집" 이렇게도 가능

function App() {

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

  return (
    <div className="App">
    <div className="black-nav">
      <h4 id = {post}>블로그임</h4>  <<<
    </div>
    <h4 > {post} </h4>
    </div>
  );
}

* 웬만한 모든 곳에 { } 중괄호 사용하여 적용 가능.

문법 3. style 넣을 땐 style = { }

- style 넣을 땐 style = { {스타일명: '값'}}

- fontSize는 font-Size라고 입력하면 안됨( '-'는 뺄셈으로 인식)

function App() {

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

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

better tmrw

리액트 2강 : JSX 문법 (3가지)

티스토리툴바