[REACT] state

1 리액트의 데이터 저장공간 state 만드는법

- state는 변수 대신 쓰는 데이터 저장공간

- {useState}를 상단에 첨부

- useState()라는 함수를 이용해서 만들어야 한다.

- 문자, 숫자, array, object 모두 저장 가능.

  // array를 저장했을 때

  //let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']);
  // {글제목[0]} 으로 출력할 수 있다.

 

2 state에 데이터를 저장해놓는 이유

- 웹이 App처럼 동작하게 만들고 싶어서.

- state는 변경되면 HTML이 자동으로 재렌더링 된다.

- 그냥 변수로 만들어놓은 HTML은 바뀌어도  자동 렌더링이 안됨.

- 제목을 정렬하든가 제목을 수정하면 새고로침 없이도 HTML에 렌더링됨.

- 자주 바뀌는 중요한 데이터는 변수 말고 state로 저장해서 사용해야 한다.

import React, { useState } from 'react'; //react에 있는 내장함수 하나를 쓰겠습니다.
import logo from './logo.svg';

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 className="list">
        <h3> {글제목[1]} </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[2]} </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

  - useState는 2개의 변수를 배열로 저장한다.
  [state 데이터, state 데이터 변경 함수]