리액트의 상태관리 state

useState는 = 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다.

state = 컴포넌트의 상태를 뜻함

 

import { useState } from "react" // 
import styled from "styled-components"


export default function Number() {

  const [number, setNumber] = useState(0)

  const add = () =>{
    setNumber(number+1) // set
    console.log(number)
  }

  const minus = () => {
    setNumber(number - 1)
    console.log(number)
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  )
}


//react의 메서드 useState는 배열을 반환하고 배열의 비구조화 할당을 통해서 
//0번째 인덱스 number , 1번째 인덱스 setNumber 라는 상수로 받아온다
//0번째 인덱스 number는 상태의 값으로 사용된다.
//useState의 메서드를 호출하면서 넘겨준 인자값 0은 number의 초기값으로 사용  useState(0)
// -> number = 0이된다. 
//값이기 때문에 jsx에서 리턴을 해서 <h1>{number}</h1> 이런식으로 화면에 표시할수있다.
//1번째 인덱스 setNumber는 number의 상태를 변화시키는 값으로 사용된다
// -> react에서 상태변화는 set함수를 통해서 사용

 

 

출력화면 

-> + 버튼을 누르면 1증가, -버튼을 누르면 1감소 초기값 0

-> 화면에 표시되는게 실시간으로 바뀐다는 건 state(number) 가 바뀔때마다 Number 함수가 반환을 다시한다라고 할 수 있다. -> 반환될 때마다 화면을 새로 그리는 것 -> 리렌더

컴포넌트는 자신이 가진 state가 변화하면 화면을 다시 그려 RENDER를 한다.

 

export default function Number() {
  console.log('number 호출') // 함수에 console.log를 출력하면 
  
  const [number, setNumber] = useState(0)

  const add = () =>{
    setNumber(number+1) 
    console.log(number)
  }

  const minus = () => {
    setNumber(number - 1)
    console.log(number)
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  )
}

 

버튼을 누를 때마다 함수가 실행되는 것을 확인할 수 있다.

 

주의!! state는 결국 const를 선언하는 것이기 때문에 이름이 겹치면 안된다.