리액트(1)

import logo from './logo.svg';
import './App.css';
// 평소에 웹만들던 것 처럼 여기에 HTML 코딩합니다 하지만 엄밀히 말하면 jsx 문법입니다~
//차이점? 태그에 class 주고 싶으면 <div class="">라고 할 수 없다 className이라고 해야 합니다 className 을 꾸미는건 App.css에서 하세요~
//리액트 장점 : "데이터 바인딩 쉽게하다" -> rendering 이 쉬워지다
//서버에서 가져온 데이터를 변수에 넣고, 그걸 html 에 넣는다
//그럴러면 document.selectID 처럼 로직을 지정하고, 거기에 넣는 불편한 로직이다 
//중괄호는 어디서든 넣을 수 있다,예를 들면, className ={} 도 가능
function App() {

  let posts = '강남 고기 맛집';
  function 함수() {
    return 100
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
        {/* <div style ="font-size:16px"> 은 안된다  <div style ={{color:'blue'}}> 로 \Object 타입으로 넣습니다.
           font-size는 "-" 빼기로 인식해서 fontSize 처럼 camelcase 로 하면 대부분 알아먹습니다
        */}
      </div>
      <img src={logo} />
      {/* 이미지를 넣기위해 adfa.jpg 라고 적거나, 경로를 설정해 주었는데, 라인 1을 보면 import를 했고, 가져오면서 지어준 이름을 src ={이름} 넣으면 불러올 수 있다 */}
      <div>{posts}</div>
      {/* posts 대신에 함수() 를 넣어도 100을 반환하다 { 변수명, 함수 등} */}
      {/* 변수명을 집어 넣으니, 강남 고기 맛집이 나왔다, .js 라면 div 에 아이디 넣고, getElementId 처럼 js로 데이터 가져오고, 그걸 변수에 넣고 아주 복잡한 로직이였다 */}
    </div>
  );
}

export default App;

import React, { useState } from 'react';//리액트에 있는 내장함수 하나를 사용할게요~
import logo from './logo.svg';
import './App.css';

function App() {
  //데이터를 저장하는 방법 1. 데이터 바인딩 (변수에 저장)2. state에 넣거나 //근데 수시로 바뀌지 않는, 로고, 블로그 이름등은 그냥 변수로 해도 상관 없음
  //state 란 변수 대신 사용하는 데이터 저장공간
//.js 처럼 그냥 변수에 넣으면 되지 왜 state를 사용하냐? 왜냐면 state는 변경되면 html 이 자동으로 "재렌더링" 됩니다 , 그냥 변수는 "새로고침"을 해야 되요
//state 정렬, 제목 수정할 경우에도 "새로고침" 없이 자동으로 재 렌더링 됩니다
  let posts = '강남 고기 맛집';

  //destructuring 문법
  //var [a,b] =[10,100];
  //let [글제목, 글제목변경] = useState('남자 코트 추천');글제목에 남자 코트 추천을 주입하다
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']);
  //글제목에 array를 넣어도 됩니다
  // [a,b] a=남자 코트 추천 b= 남자 코트 추천 state정정해주는 함수 
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{글제목[1]}</h3>
        {/* 글제목이 배열로 들어갔기 때문에 글제목[0] 또는 글제목[1] 로 할 수 있어요 */}
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;