[코딩애플] 리액트 기초 1

JSX

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

function App() {

  let post = '홍대 라멘 맛집';
  
  return (
    <div className="App"> 
      <div className="black-nav">
        <h4 style={ {color : 'Purple', fontSize : '16px'} }>블로그다</h4>
      </div>
      <h4> { post } </h4>
    </div>
  );
}

export default App;

• JSX 에서 class 넣을땐 className
• JSX 변수넣을 땐 중괄호 - '데이터바인딩'이라고 함
• JSX 스타일 넣을 땐 style = { {스타일명 : '값'} }
  font-size도 fontSize라고 적어야함. 자바스크립트에서는 -가 진짜로 뺄셈이기 때문에

---

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

function App() {

  let post = '홍대 라멘 맛집';
  let [글제목, b] = useState('남자 코트 추천');
  let [logo, setLogo] = useState('ReactBlog');
  
  return (
    <div className="App"> 
      <div className="black-nav">
        <h4 style={ {color : 'purple', fontSize : '16px'} }>{logo}</h4>
      </div> 
      <div className = 'list'>
        <h4> { 글제목 } </h4>
        <p> 2월 17일 발행 </p>
      </div>
    </div>
  );
}

export default App;

• return () 안에는 병렬로 태그 2개 이상 기입금지
• 자료 잠깐 저장시 변수로 저장 => 근데 state를 써도 된다 ( useState() )

1. import {useState} - 함수 사용시 상단에 뜸 or import { useState } from 'react';
2. useState(보관할 자료)
3. let [작명, 작명]

* 참고 : Destructuring 문법 
let num = [1,2]; 
// -> 1과 2를 변수로 빼고 싶다!
let a = num[0];
let c = num[1];
// -> 이것을 편하게 뽑는 법
let [a, c] = [1, 2] 
// 이게 디스트럭팅 문법임.. 형태 맞춤

q. 왜 변수를 안 쓰고 state를 써야함?

변수에 있는 데이터를 수정을 하거나 다른 데이터를 받아오는 등 일반 변수는 갑자기 변경되면 html에 자동으로 변경이 안된다.
근데 그와 다르게 state는 갑자기 변경되면 state를 쓰고 있던 html이 자동재렌더링된다.
➡️ 변동시 자동으로 html에 반영되게 만들고 싶으면 state를 써라

로고글자도 state로 넣으면 좋을듯? 
		  let [logo, setLogo] = useState('ReactBlog');
          ...
        <h4 style={ {
                   color : 'purple', fontSize : '16px'} 
					}>{logo}</h4>
 					// -> 쓸데 없어 보임

그냥 ReactBlog로 적어라~ state 남발 ㄴㄴ
자주 변경될 거 같은 html 부분은 state로 만들어놓기