웹 개발/React
Redux 시리즈 - UseState() 란 무엇인가!
개발하는 동이
2024. 10. 9. 23:53
728x90
먼저 글을 쓰기에 앞서! 제가 하고 싶은 방식은 사람들이 코드를 직접 치면서 공부를 하는 사람들이 아마 대부분일꺼라고 생각하지만 제 깃허브를 공개해서 사람들과 함께 같이 코드 공부를 하고 싶어서 깃허브 레포지토리를 하나 개설하게 되었습니다. 이렇게 하면 개린이 분들이 저를 지적할 수도있어 개발자로서의 성장을 많이 할 수 있을꺼같아 개설하였으니 댓글의 많은 지적 부탁드리겠습니다!
자바스크립트
https://github.com/DongEsssss/react-study
useState()는 React에서 함수형 컴포넌트 내에서 상태 관리를 위한 훅 중 하나 입니다.
역할
컴포넌트에서 내에서 동적으로 데이터를 관리할 수 있게 만들어주는 HOOK!
가장 기본적인 훅으로 함수형 컴포넌트에서 가변적 상태를 지닐 수 있게 도와줍니다.
// 기본 형식
const [state, setState] = useState(initialState);
state: 현재 상태 값을 나타냅니다.
setState: 상태 값을 변경하는 함수입니다.
initialValue: 상태의 초기값입니다. 함수가 처음 실행될 때 이 값이 state에 설정됩니다.
특징
- 초기값 설정 : 상태의 초기 값은 컴포넌트가 처음 렌더링될 때만 적용
- 비동기 업데이트 : 상태를 업데이트하는 setState는 비동기적으로 실행
- 배치 업데이트 : 성능 최적화를 위해 여러 상태의 업데이트를 묶어서 처리
예시
import React, { useState } from 'react';
export default function UseState() {
const [count, setCount] = useState(0);
return (
<div>
<p>클릭한 수 : {count}번</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
이런 식으로 클릭을 하면 count의 상태를 setcount 상태를 업데이트 할 수 있습니다.
useState 사용 시 주의 할 점
1. 반드시 컴포넌트 최상단 층에서만 불러야 합니다.
- 조건문이나 반복만 안에서 적을 경우 안에서만 Hook이 불립니다.
2. 함수형 컴포넌트 내부에서만 불러야 합니다.
- class형 컴포넌트 안에서 hook을 사용해서 안됩니다.
부족한 부분이 있다면 바로바로 업데이트 하겠습니다.!
728x90
반응형