티스토리 뷰
useState는 리액트 훅에서 사용하는 함수다.
형태는 아래와 같다.
const [state 변수, state 값 갱신 함수] = useState(state 초기 값);
이는 구조분해할당의 일환이다.
구조분해할당은 객체나 배열을 변수로 분해시킬 수 있는 문법이다.
예시)
import React, { useState } from 'react';
function clicker() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}번 클릭했습니다!</p>
<button onClick={() => setCount(count + 1)}>
Counter
</button>
</div>
);
}
초기 변수의 값을 useState의 인자를 통해 0으로 만들어준다.
그리고 Counter버튼을 눌러 onClick 이벤트를 실행시키면 setCount의 초기 변수에 1을 더하는 함수가 실행돼서 count는 1이 더한 수로 갱신된다.
또한, 함수형 컴포넌트가 아닌 클래스형 컴포넌트였으면 count도 this.count 식으로 적었을 것을 함수형 컴포넌트 이기 때문에 짧게 적을 수 있게 된다.
참고:
ko.reactjs.org/docs/hooks-state.html
반응형
'Basic_Studies > React & Next.js' 카테고리의 다른 글
[React] React-Router 기초 (0) | 2021.01.06 |
---|---|
[React] 리액트에 font-awesome 아이콘 사용하기 (0) | 2020.12.18 |
[React] 리액트 생명주기 간단요약 (0) | 2020.09.18 |
[React] 컴포넌트 맛보기 (0) | 2020.09.11 |
[React] 리액트(React) 설치와 준비하기. (0) | 2020.07.17 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- bs4 크롤링
- 자바스크립트
- 10989 파이썬
- 백준 10989 파이썬
- dvd 효과
- nuxt 공식문서
- NextJS
- 움직이는 글래스모피즘
- Til
- next.js 리다이렉트
- getserversideprops redirect
- 리액트 파라미터 넘기기
- 리액트 라우터
- 리액트 컴포넌트
- 카페음료테스트
- css 글래스모피즘
- nuxt 공식문서 한글
- 리액트 스크롤
- nextjs 스크롤
- 파이썬 정렬
- 리액트
- nextjs 파라미터 넘기기
- react router
- 글래스모피즘 구현
- vscode venv
- 화이팅
- 글래스모피즘 애니메이션 구현
- css marquee
- 파이썬 크롤링
- 파이썬 flask
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함