[리액트] 리액트 입문강의 듣는중 / 리액트의 'state'란?

>> 리액트 state

 

 

매번 코드가 업데이트 될 때마다, ui를 바꿔주는 건 너무 낭비라고 함

ui를 바꾸는 건 굉장히 '비싼' 일이라고 한다.

 

뭔지도 모르는 변수가 업데이트 될 때마다 매번 ui를 바꾸는 건 굉장히 낭비되는 짓

리액트는 이러한 불필요한 업데이트를 방지하기 위해 'state'라는 개념을 만들었음.

 

변수와 또 다른 개념의 state를 만드는 것

state가 업데이트 되면, ui를 업데이트 해주겠다는 것!

 

 

  const [count2,setCount2] =useState(0);

 

 

useState는 함수이다.

useState는 무엇을 반환하냐? 배열(Array)을 반환한다.

'0'은 초기값임. 

이 초기값을 담고있는 state 변수 하나랑 ( count2 )

이 state값을 바꿀 수 있게(업데이트 해주는) set함수를 반환한다. (setCount2)

 

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

export default function App() {
  let count = 0;
  const [count2, setCount2] = useState(5);
  const increase = () => {
    count = count + 1
    console.log('count work?', count)
  }

  return (
    <main>
      <div> {count} </div>
      <div> state:{count2}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

 

 

 

 

state변수는 일반적인 방법으로 변수값을 바꿔주는게 아니라, 세팅되어 있는 특정한 함수 안에서 바꾸어 주어야 한다.

 

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

export default function App() {
  let count = 0;
  const [count2, setCount2] = useState(5);
  const increase = () => {
    count += 1
    //이런식으로 쓰면 안되고
    // count2 = count2 + 1
    setCount2(count2 + 1)
    console.log('count work?', count)
  }

  return (
    <main>
      <div> {count} </div>
      <div> state:{count2}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}