state 기본개념

변수대신에 쓸수있는 데이터 저장공간

 

함수 내에서 선언된 변수 처럼 컴포넌트 내에서 관리 되어, 값을 변경 해 가며 사용 할 수 있다.

state는 변경이 되면 HTML이 자동으로 재렌더링 되기때문에 (변수는 새로고침을해야만 데이터를 받아올 수 있음, 재랜더링안됨)

자주 변경되는 데이터를 새로고침 없이 웹앱처럼 동작하게 만들기 좋 장점을 가지고 있습니다.

import React, { useState } from 'react'; let [state데이터 변수명, state 데이터 변경 함수명] = useState('데이터!!') 혹 const [state, setState] = useState(initialState); <div> { state데이터 변수명 } </div>

- state는 직접 수정해서는 안되고 useState 를통해서 반환된 setState() 함수를 사용해서 수정해야합니다.

예를들면 const [state, setState] = useState('11111');

setState('22222')

 

 

/* eslint-disable */

import logo from './logo.svg';

import './App.css';

import river from './river.jpg';

import React, { useState } from 'react';

function App() {

  let [topic,topicChange] = useState(['뷰 좋은 캠핑장',  '뷰 좋은 카페', '뷰 좋은 음식점']);

  {/* ES6 destructuring 문법 */}

  let posts = '뷰 좋은 카페'

  return(

    <div className="App">

      <div className="h-nav"  //nav css

      >

        <div> blog ...............</div>      

      </div>

      <img src={river} />

      <div className="list">

          <h3> {topic[0]}</h3>

          <p>2023-10-31</p>

          <hr/>

         

      </div>

      <div className="list">

          <h3> {topic[1]}</h3>

          <p>2023-10-30</p>

          <hr/>

      </div>      

      <div className="list">

          <h3> {topic[2]}</h3>

          <p>2023-10-29</p>

          <hr/>

      </div>    

   

    </div>

  );

}

export default App;