react hooks 중에 기본 usestate 사용방법 정리

usestate는 리액트 훅 중에 기본적으로 알아야 될 훅이다

상태관리를 하기 위해 사용하며 상태를 저장하고 변경해준다

1. usestate 기본 사용법

const [state, setState] = useState(0);

usestate는 구조분해 할당문법을 사용한다

배열에 첫 번째 state는 현재 상태값을 뜻하며 상태값은 usestate()안에 적은 0이 현재 초기 상태값이다

그리고 두 번째 값으로 현재 상태값을 바꿔준다

function App() {
  const [count, setCount] = useState(0)

    function count_click(){
      setCount(count + 1 )
    }
  return (
    <>
    <span>번호 카운트:</span>
    <span>{count}</span>
    <button onClick={count_click}>click</button>
    </>
  )
}

 

위에 같이 코드를 짜면 버튼을 눌렀을 때 onClick 이 실행하면서 count_click() 함수가 실행되면서

setCount를 통해 현재 count의 상태값이 1 증가된다 그러면 {count} 적은 곳에 값이 바뀌기 위해 

리액트가 재렌더링이 됩니다 (렌더링은 리액트가 페이지에 코드를 다시 그리는 과정이라고 생각하면 돼요)

 

2. usestate로 배열 사용하는 방법!

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [val, setval] = useState(["바나나","딸기","사과"])
  const [input1,setinput1] = useState("")

  function handleChange(event) {

      setinput1(event.target.value); 
      // event를 받아서 현재 input박스에 있는값을 input1의 상태값으로 바꿔준다



  }
    function plus_(){
      setval((pre)=>{
        return[input1,...pre]
      })
    }
  return (
    <>

    <input type="text" value={input1}  onChange={handleChange} />
    <button onClick={plus_}>click</button>
    <div>
      {
        val.map((name,key)=>{
          return <span key={key}>{key}번:{name}</span>
          //반복적인 리스트를 사용하는 렌더링할때는 key를 span태그 안에 key를 넣어 줘야된다
          //map말고도 반복문들을 사용할때 적어줘야 될것 같다
        })
      }
      
    </div>
    </>
  )
}

export default App

일단 usestate를 두 개를 만들어준다 

input에 value 속성은 현재 input태그에 들어간 값을 인풋박스에 입력시켜 준다

이게 없으면 인풋박스에 아무것도 안 적힌다 

그리고 onChange는 input박스에 입력할 때마다 반응하는 기능을 가진다

input에 입력을 하면 handlechange를 실행한다

handlechange에서는 setinput1을 통해 인풋박스에 값을 넣어줍니다

그리고 버튼을 누르면 plus_함수가 실행되면서 인풋박스 밑에 val상태값을 map을 사용하여 출력하게 됩니다

 

      setval((pre)=>{
        return[input1,...pre]
      })

 

중요!

setval을 통해 배열 안에 값을 추가할 수 있는데요

여기서 pre는 현재 val 상태값의 배열을 가져옵니다 그리고

input1은 인풋박스로 입력 넣은 거가 되고  

스프레이드 오퍼레이터(...)를 사용해서 기존에 있던 배열을 가지고 옵니다

그러면 새로 인풋박스에 넣은걸 앞에 출력하게 되고 기존에 있던 게 뒤로 갑니다

 

3. usestate가 여러 개 일 때?

import { useState } from "react";

function ProfileCard() {
  const [person, setPerson] = useState({
    fullName: "김철수",
    yearsOld: 25,
    university: "서울대학교",
  });

  return (
    <div>
      <h1>이름: {person.fullName}</h1>
      <h2>나이: {person.yearsOld}</h2>
      <h3>학교: {person.university}</h3>
      <button
        onClick={() => {
          setPerson({
            fullName: "이영희",
            yearsOld: 27,
            university: "부산대학교",
          });
        }}
      >
        사용자 변경
      </button>
    </div>
  );
}

export default ProfileCard;

이렇게 객체를 사용해서 usestate 여러 번 쓸 거를 줄일 수도 있다
딱히 근데 usestate를 많이 쓴다고 문제 되는 것 같지는 않다
다만 이렇게 하면 가독성은 높을 것 같다