코딩애플 react JSX 문법, state

 

JSX 문법 1. html에 class 넣을 땐 className

 

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

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

 

JSX 문법 3. html에 style속성 넣고싶으면    /  카멜케이싱, 중괄호 안에 자료형으로 넣음!

import './App.css'; 열어서 하기 귀찮을때

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

 

 

 

---

 

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

function App() {
  return (
    <div className="App">
      <div className="black-nav">

        <h4>블로그</h4>
      </div>
      <div className='list'>
        <h4>글 제목</h4>
        <p>2월 11일 발행</p>
      </div>


    </div>
  );
}

export default App;

return()안에는 태그 병렬 기입 금지.(제일 부모 태그만 하나 만들고 하위에 만들면 문제 없음)

 

 변수와 state 차이

state는 변경시 html이 자동 재랜더링이 됨!🙂

변경이 안되는건 변수 or 하드코딩으로, 자주 변경되는건 state (날짜, 제목 등등등)

 

 

 

 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {


  let [제목, 제목변경] = useState(['남자 코트 추천', '고양이 코트 추천', '강아지 코트 추천'])



  //destructuring 문법
  //let [a, b] = [1, 2];
  //a 는 1이 할당되고, b는 2가 할당됨.


  return (
    < div className="App" >
      <div className="black-nav">

        <h4>블로그</h4>
      </div>
      <div className='list'>
        <h4>{제목[0]}</h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[1]}</h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[2]}</h4>
        <p>2월 11일 발행</p>
      </div>


    </div>
  );
}

export default App;