React 기초_2

데이터는 2가지 방법으로 넣을 수 있음😊

1. 변수에 넣기
2. state에 넣기

####여기서는 리액트의 데이터 저장공간 state을 알아봄!

1. {useState} 상단에 첨부
2. 변수 대신 쓰는 데이터 저장공간
3. useState()를 이용해 만들어야 함.

let [글제목, 글제목변경] = useState('남자 코트 추천');
array처럼 데이터를 저장함 (문자, 숫자, array, object 다 저장가능)
state형식은 무조건 위와 같음!

예시

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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']);

  let posts = '강남 고기 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3> {글제목[0]} </h3>
       <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

state에 데이터 저장해놓는 이유:

웹이 App처럼 동작하게 만들고 싶어서🙌
state는 변경되면 HTML이 자동으로 재랜더링이 됨!
HTML이 새로고침 없이도 스무스하게 변경가능👏
따라서 자주 바뀌는, 중요한 데이터는 변수말고 state로 저장해야함!