[React] Hooks 1️⃣ useState

문규찬·2021년 3월 7일
0
post-thumbnail

벨로퍼트님의 게시글을 보며 정리하였습니다.
출처: https://velog.io/@velopert/

useState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하시면 됩니다.

class형 component 에서 상태값과 함수형 component의 상태값 관리 차이

//class형 컴포넌트

constructor(){
super();
this.state={
	id: 0,
	name: '',
	place: {}
}
}

//함수형 컴포넌트
const [id, setId] = useState(0),
const [name, setName] = useState(''),
const [place, setPlace] = useState({});

state의 여러가지 상태값을 지정해줬다면
useState에서는 하나의 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러번 사용하시면 됩니다.

useState 구조

const [state, setState] = useState(initialState)

상태 유지 값(state)과 그 값을 갱신하는 함수(setState) 를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

useState를 사용하여 counter작성

import React, { useState } from "react";

export const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>현재 값은 {value} 입니다.</p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

초기 상태값은 0이고 +1이나 ,-1 버튼을 누를때마다 value 값이 변한다.

0개의 댓글