3.(React) Blog만들기 : State

 

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

function App() {
// return() 안에는 병렬로 태그2개이상 기입금지
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    <div className='list'>
      <h4>글제목</h4>
      <p>2월 17일 발행</p>
    </div>
    </div>
  );
}

export default App;

 

state 란?

자료 잠깐 보관할때 변수 저장

 

 

Destructuring 문법

  // 여러가지 자료들을 한 곳에 보관하고 싶을때 array
  let num = [1,2];
            // 따로 변수로 빼고 싶을때
            let a = num[0]; //1
            let c = num[1]; //2
  
  let [d, f] = [1, 2];
  // 쉽게 빼주려면 Destructuring 문법을 사용해서 빼줌
  // 이렇게 선언시 d=1, f=2의 값을 가지게됨

 

state 만드는법
1.import { useState}
2. useState(보관할 자료)
3. let,const로 [작명,작명]

state를 사용하는 이유
1. 갑자기 변수가 변경되면 자동으로 html에 재랜더링 됨

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

function App() {

  let [글제목,b] = useState(['여성 의류 추천','대구 분식집 추천','리액트 공부방법']);
  // a: state에 보관했던 자료
  // a에 들어갈 자료를 array로 작성
  // b: state 변경을 도와주는 함수

  return (
    <div className="App">
      <div className="black-nav">
        <h4>Blog Logo</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;