React State

데이터는

1.변수에넣거나

2.state에 넣거나

state에 넣으려면 import먼저 해온다.

import {useState} from 'react'

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

function App() {


  //let [a,b] = useState('남자 코트 추천')
  let [글제목, 글제목변경] = useState('남자 코트 추천')

  // [a,b] 형태의 array가 남는다. a에는 남자 코트 추천이 들어감
  // b에는 그 데이터를 수정하기위한 함수를 생성해줌, 그냥 사용법임
  // ES6 destructuring 문법임   var [a,b] = [10,100] 하면 각각 a,b에 들어감
  // a = 10, b = 100 이런식으로!

  //

  let posts = "군자 훠궈 맛집" 

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>

      <div className="list">
      <h4>{ 글제목 }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>

    </div>
  );
}

export default App;

state는

1)변수 대신 쓰는 데이터 저장공간

2)useState()를 이용해 만들어야함 [저장공간,저장공간변경]

3)그냥 외워서쓰면됨

4)react가 웹 app처럼 동작하게 만들고 싶어서 사용한다.

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

 <div className="list">
      <h4>{ 글제목[0] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>

위와같이 배열 형태로도 쓸 수 있다.

 

여튼 이와같이 state를 써야 (변수를 안쓰고) 재 렌더링 안하고 그때그때 바뀌는 웹앱 형태로 쓸 수 있다.

 

즉 수시로 바뀌는 변경하는 중요하는 데이터들은 state로 쓰는것이 좋다.

 

---

-최종본

state로 제목 4개 다르게 해서만들어보기

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

function App() {


  //let [a,b] = useState('남자 코트 추천')
  // let [글제목, 글제목변경] = useState('남자 코트 추천')
  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])


  // [a,b] 형태의 array가 남는다. a에는 남자 코트 추천이 들어감
  // b에는 그 데이터를 수정하기위한 함수를 생성해줌, 그냥 사용법임
  // ES6 destructuring 문법임   var [a,b] = [10,100] 하면 각각 a,b에 들어감
  // a = 10, b = 100 이런식으로!

  //

  let posts = "군자 훠궈 맛집" 

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>

      <div className="list">
      <h4>{ 글제목[0] }</h4>
      <p>4월 15일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[2] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[3] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>

    </div>
  );
}

export default App;