useState

내일배움캠프 LGLG!

5주차(주특기 입문 - React)

useState

• 컴포넌트가 가질 수 있는 상태
  예를들어 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있음

Import

useState를 사용하기 위해서는 react에서 useState를 Import 받아야 함

import { useState } from "react";

변수 선언

아래처럼 state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 state와 setState라는 두가지 요소를 배열 형태로 리턴해준다.
state명은 알맞게 설정하고 두 번째 요소에 set을 붙여준다.

const [state, setState] = useState(초기값);

변수 재선언

state의 값을 변경하려면 setState 함수를 불러 인자에는 변경될 값을 넣어주면 된다.

setState(1); // state의 값을 1로 변경

setState함수를 이용해서 state의 값을 변경하면 해당 컴포넌트는 화면에 다시 렌더링되어 state가 변경될 때마다 화면이 업데이트됨

예를 들어 state가 시간이라고 가정할 경우,
시간이 변경할 때마다 화면이 렌더링 된다.

import { useState } from "react";
import "./App.css";

App(() => {
  const [time, setTime] = useState(1);

  const onClick = () => {
    setTime(time + 1);
  };

  console.log("time 업데이트 -> ", time);

  return (
    <div className="App">
      <header className="App-header">
        <span>현재시간: {time}시</span>
        <button onClick={onClick}>update</button>
      </header>
    </div>
  );
});

export default App;

출력 시 렌더링 될 때마다 time의 값이 업데이트된 state가 들어감