3. state (코딩애플)

데이터를 넣는 법

1.변수

2.state ( 자주 바뀌고, 중요한 데이터 저장할때 활용)

 

state?

1. 변수 대신 쓰는 데이터 저장공간
2. useState()를 이용해서 만들어야함
3. 문자,숫자,array,object 다 저장가능

쓰는 이유?

변수는 변경되어도 자동 재렌더링이 안되지만 state는 변경되면 html이 자동으로 재렌더링됨

(새로고침 없이 변경됨)

 

 

<state 사용하기>

 

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

// 해석 : react에 useState 라는 내장함수를 쓰겠습니다~

 

useState()를 이용해서 state 만들기

function App(){

  let [state데이터,state데이터 변경 함수] = useState('data01','data02','data03');
  
  return(
  <h3> { state데이터 } </h3> // data01 출력
  <h3> { state데이터[1] } </h3> // data02 출력

 

 

 

useState(0) : 숫자열

useState[(0)] : 문자열

import React, { useState } from 'react';

function Count() {


    //숫자열
    let [Number,countNum]=useState(0);
    // eslint-disable-next-line
    let IncreaseNum =()=>{
        countNum(Number+1) // 숫자끼리 더해진다 ( 0+1 = 1 )
    }
    
    //문자열
    let [Number,countNum]=useState[(0)];
    // eslint-disable-next-line
    let IncreaseNum =()=>{
        countNum(Number+1) // 0을 문자로 인식한다. ( "0"+"1" = 01)
    }

  return (
    <div>
      <h1>{Number}</h1>
      <button onClick={IncreaseNum}>+1</button>
    </div>
  );
}

export default Count;