리액트 Hooks: useState

useState

- 컴포넌트가 가지는 상태

기본구문

const [state, setState] = useState();

• state: 상태 값을 저장하는 변수
• setState: 상태값을 갱신하는 함수
• useState: 상태 초기의 값 useState("괄호안에 숫자나 문자로 초기값을 지정 할 수있다.")

예제1)

const  [time, setTime] = useState(8)

• useStatef로 time의 초기값을 3로 설정
• setTime함수를 이용해 변수time의 값을 지정해 변경
• timeUp 함수를 선언하고 버튼timeup에 onClick이벤트로 timeUp 함수지정 버튼을 누를때마다 time + 1
• timeDown 함수를 선언하고 버튼timedown에 onClick이벤트로 timeDownn 함수지정 time - 1
• time state가 변경될때마다 화면에 재렌더링됨

mport React, { useState } from "react";

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

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

  const timeDown = () => {
    setTime(time - 1);
  };
  return (
    <div>
      <button onClick={timeUp}>timeup</button>
      <button onClick={timeDown}>timedown</button>
      <span>지금 시간은{time}시입니다</span>
    </div>
  );
};

export default App;

예제2)

- useState의 초기값이 무거운 값(함수의 실행이 많은 계산식)이라면 useState의 인자로 콜백함수를 호출하여 맨처음 렌더링 될때만 렌더링되게 한다.

import React, { useState } from "react";

const 무거운작업 = () =>{
	console.log("무거운 작업 실행")
    return 500
}

function App(){
	const [time, setTime] = useState(()=>{
    	return 무거운작업()
    })

};

요약

• useState의 초기값이 무거운 함수라면 useState의 인자로 콜백함수를 호출하여 맨 처음 렌더링 될때만 실행하게한다.
• useState는 컴포넌트의 상태를 관리하는 React Hooks이다.
• Reat에서 map()함수를 사용하여 출력하기위해 key={} 가 필요하다.
• 변수state의 값을 변경하려면 함수setState에 변경하는 값을 준다

setState 예시

 const handleInputChange = (e) => {
    setInput(e.target.value);
  };

리액트의 첫 시작이자 기본인 useState Hook에 대해 정리했다 리액트 시작한지 일주일도 되지않아서 리액트 훅스에 대해 이해가 조금 덜 됐지만 반복학습하여 리액트에 대한 이해도를 높여야겠다.