useState

useState

• state란? 컴포넌트의 상태를 말한다.
• fruits라는 state가 있다면 apple, banana, grape, orange 등을 가질 수 있다.
• javascript의 변수가 아닌 useState를 사용하는 이유
  : react에서 컴포넌트 상태에 따라 UI를 다시 구성한다.
  변수는 변경되어도 컴포넌트에 영향을 주지 않는다.
  하지만 useState는 UI가 다시 렌더링 된다.
  즉, 값이 변함에 따라 화면이 값을 참조하여 다시 그려지는 경우 useState를 사용할 수 있다.
  
• import { useState } from 'react' ; 로 사용을 알린다.

useState 선언

• const [ state, setState ] = useState(value);
• useState는 위와 같이 선언한다.
• const [ state명, state할당 함수] = useState(초기값); 이다.
• useState가 선언되면, state변수 식별자, 값을 재할당할 수 있는 함수 식별자가 리턴된다.

// useState를 사용하기 위해 import 한다.
import {useState} from 'react';

function App () {
    // state 선언
    const [time, setTime] = useState(1);

    // javascript 내에서는 변수처럼 식별자로 사용한다.
    // time에 10이 할당된다.
    console.log(time); // 1

    // time을 수정할 수 있는 함수가 할당된다.
    console.log(setTime); // f(){}
    
    // JSX에서는 { } 안에 state이름을 작성한다.
    return (
        <>
        	<p>{time}시</p>
        </>
    );
}

export default App;

useState 업데이트

import {useState} from 'react';

function App () {
    const [time, setTime] = useState(1);
    
    // eventHandler
    
    const timeHandle = () => {
    	let newTime;  // 일반 변수를 만든다.
        if (time >= 12) { // 12시가 넘어가면
        	newTime = 1; // 1로 바꾼다
        } else {
        	newTime = time + 1; // 아니면 + 1한다.
            // newTime = time++; 는 유효할 수 없다.
        }
        setTime(newTime); // useState 수정 함수를 이용해 값을 바꾼다.
    }

// button 추가
    return (
        <>
          <p>{time}시</p>
          <button onClick={timeHandle}>time up</button>
        </>
    );
}

export default App;

useState의 자료구조

• 배열, 객체 등 다양한 자료구조를 이용할 수 있다.

import {useState} from 'react';

function App () {
    const [time, setTime] = useState( ["오전", 0] );
    console.log(time[0]); // 오전
    console.log(time[1]); // 0

    const [fruits, setFruits] = useState( {apple:"사과",orange:"오렌지"} );
    
    return (
        <>
          <p>{time[0]} {time[1]}시</p>
          <p>{fruits.apple} {fruits.orange}</p>
          <p>{time[0] + time[1]}</p>          
          <p>{fruits.apple + fruits.orange}</p>
        </>
    );
}

export default App;

useState와 일반 변수

• useState로 선언한 num1과 let으로 선언한 num2가 있다.
• num1과 num2 값을 바꾸는 버튼이 있다.
• 콘솔창을 확인해보면 num2의 값 또한 정상적으로 바뀌고 있음을 알 수 있다.
• 화면은 num1의 값이 바뀔 때만 다시 렌더링 된다.

import {useState} from 'react';

function App () {
    const [num1, setNum] = useState(0);
    let num2 = 0;

    function stateNum() {
      let newNum = num1 + 1;
      setNum(newNum);
    }

    function letNum() {
      num2 = num2 + 1;
      console.log(num2);
    }

    return (
        <>
          <button onClick={stateNum}>state Num</button>
          <p>{num1}</p>
          <button onClick={letNum}>let Num</button>
          <p>{num2}</p>
        </>
    );
}

export default App;