리엑트 블로그 틀 제작 JSX 기초문법 (2)

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

// return안에는 병렬로 태그 2개 이상 기입 금지



// 자료 잠깐 저장할 떈 변수
let post = '강남우동 맛집';

// 자료 잠깐 저장할땐 스테이트 문법


function App() {
let [글제목, b] = useState(['여자 코트 추천','강남 맛집 추천' , '파이선독학']);
// let [logo, setLogo] = useState('ReactBlog'); 무언가 변경이 되는것만 useState 쓰는법


  return ( 
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className='list'>
        <h4>{글제목[0]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

우선 기본 코드는 다음과 같다. 

 

APP.js라는 곳이 메인 html을 쓰는데 

return ( html  코드);

 

병렬로 2가지 이상 태그를 금지한다. 바로 에러남 . 

 

그리고

 

1) Class는 ClassName 으로 제공한다.

 

 

2) JSX에서 JSTL처럼 변수명을 하기가 편하다

 

ex) var name = '홍길동' 이 있다면

 

<p> 이름 : {name}</p>

이라고 하면

이름 : 홍길동 이라고 이름 이 저장된다. 

 

3) useState가 있다. 무언가 변경이 되는 것만 useState를 쓴다.

ex) logo 등 몇년에 한번 변경 되는건 변수선언을 한다. 

 

 

 

 

 

 

나중에 스프링부트 + 리엑트 한번 해봐야겠다.

 

ㄹㅇ 신세계다. 

저번에 JPA 부터 신세계 느끼는중..