[React] JSX 문법

function App() {
  return ( // 소괄호 안에 html 코딩 = html같지만 JSX라는 문법
    <div className="App">
      dddd
    </div>
  ); 
}

className="클래스명"

--------App.js
function App() {
  return (
    <div className="App">
      <div className='black-nav'>
        <div>개발 blog</div>
      </div>
       <h4>{ 변수명 }</h4> // 데이터 바인딩 { 변수명, 함수 등 }
    </div>
  );
}

--------App.css
body {
  font-family: 
  'nanumsquare';
}

.black-nav {
  background: black;
  width: 100px;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

• 데이터 바인딩: src/ id / href 등의 속성에도 { 변수명, 함수 등 }

<h4>{ 변수명 }</h4> // 데이터 바인딩 { 변수명, 함수 등 }

import logo from './logo.svg';
<img src={ logo } /> // {import해온 변수명}


style={ { color : 'blue', , fontSize : '30px'} } 
// style= { {오브젝트 형태로 넣어야 한다} }
// font-size : ' - ' 사용 불가 , 카멜케이스 표기법으로 작성


function App() {

  let posts  = '참치 맛집';
  let posts2 = { color : 'red', fontSize : '30px' }; // 
  return (
    <div className="App">
      <div className='black-nav'>
        <div style={ **{ color : 'blue', fontSize : '30px' }** }>개발 blog</div>
      </div>
      <div className='black-nav'>
        <div style={ posts2 }>개발 blog2</div> 
      </div>
      <h4>{ posts }</h4>
    </div>
  );
}

데이터 넣기

• 변수에 넣거나
  let posts = '참치 맛집';
  // 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다

• state에 넣거나
  import React, { useState } from 'react';
  // 리액트 데이터 저장공간 state 만드는 법

• useState('맛집 추천');
  // [a,b] a= 맛집 추천 데이터가 들어가 있고, b = 맛집 추천 state 정정해주는 함수

• let [글제목, 글제목변경] = useState('맛집 추천!');
  // [state 데이터, state 데이터 변경 함수]
  // state : 변수 대신 쓰는 데이터 공간
  // useState()를 이용해 만들어야함

• var [a,b] = [10,100];
  // 10, 100을 a와 b변수에 담아주세요
  // array, object에 있던 자료를 변수에 쉽게 담고 싶을때
  // a=10, b=100

• state에 데이터를 저장해 두는 이유
  // state 는 변경되면 HTML이 자동으로 재렌더링된다
  // 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다
  // 자주 바뀌는, 중요한 데이터는 변수말고 state로 저장

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

function App() {
  
  // useState('맛집 추천'); 
  // [a,b] 형태로 저장 
  // a= 맛집 추천 데이터가 들어가 있고, b = 맛집 추천  state 정정해주는 함수
 
  //let [글제목, 글제목변경] = useState('맛집 추천!'); 

  let [글제목, 글제목변경] = useState(['맛집 추천!', '신발 추천!', '옷 추천!']); 
  // [state 데이터, state 데이터 변경 함수]
  // state : 변수 대신 쓰는 데이터 공간
  // useState()를 이용해 만들어야함
  // useState( ['','']): array, object, 문자, 숫자 등 다 저장가능
  // state 는 변경되면 HTML이 자동으로 재렌더링된다

  let posts  = '참치 맛집';
  // 그냥 변수는 변경되어도 자동 재렌더링이 안된다 -> 새로고침해야한다  

  return (
    <div className="App">
      <div className='black-nav'>
        <div>개발 blog</div>
      </div>
      <div className='list'>
        <h3> { 글제목[0] }</h3>
        <p></p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[1] }</h3>
        <p>2월 18일 발행</p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[2] }</h3>
        <p>2월 19일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;