[React] useState를 알아보자

리엑트를 공부하며 알게된 기능 중 useState를 정리해보자.

useState는 구성요소에 상태변수를 추가할 수 있는 React Hook 이다.

일단 useState를 사용하기위해선 react의 다양한 Hook들 중 useState를 호출해주어야한다.

쉽게 말하자면 리엑트 안의 해당 기능을 내 프로젝트로 가져오는것

//useState import시키기
import { useState } from 'react';

//useState 선언
const [state, setState] = useState(initialState);

JavsScript를 알고계신다면 익숙하실 구조분해할당으로 useState에 변수를 지정해주었다

👍 구조분해할당 알아보기

initialState: 초기상태값. 최초 랜더링 시 보여질 값입니다.

setState : 상태를 변경시킬 함수.

state : 현재 상태값 (setState 함수의 영향을 받아 값이 변경된다.)

 

예제

내 반려동물의 이름을 입력하고 나이를 조정할 수 있는 기능을 만들어보자.

import { useState } from "react";

function MyPet() {
  const [petName, setPetName] = useState("해피");
  const [petAge, setPetAge] = useState(2);

  return (
    <>
      <p>내 반려동물의 이름은 {petName}입니다.</p> {/* 현재이름을 넣어줌 */}
      <input
        type="text"
        placeholder="내 반려동물의 이름"
        onChange={(e) => {
          //onchange 이벤트를 통해 값이 변경될때마다 petName의 상태를 변경.
          setPetName(e.target.value);
        }}
      />
      <p>내 반려동물의 나이는 {petAge}살이에요.</p>
      {/* 현재나이를 넣어줌 */}
      <button
        type="button"
        onClick={(e) => {
          //클릭시 현재상태값 + 1
          setPetAge(petAge + 1);
        }}
      >
        +1
      </button>
      <button
        type="button"
        onClick={(e) => {
          //클릭시 현재상태값 - 1
          setPetAge(petAge - 1);
        }}
      >
        -1
      </button>
    </>
  );
}

export default MyPet;

 

결과물

공부내용을 기록하는 블로그입니다.

피드백은 언제든지 환영합니다😊