React | useState Hook 알아보기

권은혜·2023년 5월 23일

React Hooks

목록 보기
1/1
post-thumbnail

Hook 이란?

  • Hook은 함수 컴포넌트에서 React state과 생명주기 기능을 “연동(hook into)”할 수 있게 해주는 함수입니다
  • 리액트에서 동적인 값, 즉 state를 관리하기 위해서는 클래스형 컴포넌트로 작성해야 했지만
    16.8 버전부터는 함수형 컴포넌트에서 state관리를 위해 Hooks 기능이 도입되었다

useState()

React Hooks 중 대표적인 Hook이다

import React, { useState } from 'react'; //리액트 라이브러리에서 useState 훅을 가져온다

function Example() {
  	// state변수와 해당 state를 갱신할 수 있는 함수 생성
	const [count, setCount] = useState(0); //초기값 지정

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>
			Click me
			</button>
		</div>
	);
}
  • const는 재할당이 불가하다 그런데 여기서 count 값은 변하기 때문에 let으로 선언되어야 하지않나 하고 생각이든다. BUT 하지만 useState로 상태가 업데이트 될 때 state값이 변경되는 것이아니라, 재렌더링이 일어나 값을 변경하는게 아닌 변경된 값을 새로 할당 해주는 것이기 때문에 가능하다.
profile
성장하는 프론트엔드 개발자

0개의 댓글