Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
Tags
- dart 변수
- react typescript
- next.js css
- icon
- react env
- 컨디셔널 렌더링
- createGlobalStyle
- react
- nextjs .env
- typescript react
- styled components
- CSS
- API 토큰
- nextjs 설치
- nextjs
- git lab
- Git
- getModifierState
- ngrok설치
- bootstrap
- ngrok실행
- SCSS
- github io
- API token
- rewrites
- npm styled-reset
- github
- There isn’t anything to compare
- fetch
- input type=file
Archives
- Today
- Total
꾸준히 성장하는 개발자
[React]useState( ) 본문
useState( )
useState Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다.
const [state변수, state를 갱신할 수 있는 함수] = useState(state변수의 초기값)
import React, { useState } from 'react'; //useState Hook을 React에서 가져옴
function Example() {
const [count, setCount] = useState(0);
//useState의 인자의 값으로 0을 넘겨주면 count 값을 0으로 초기화한다
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
버튼 클릭을 하면 setCount 함수를 호출하여 state 변수를 갱신하고
React는 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링한다
'React' 카테고리의 다른 글
[에러] Plugin "react" was conflicted between "package.json » eslint-config-react-app (3) | 2022.04.29 |
---|---|
[에러] Need to install the following packages: create-react-app (0) | 2022.04.29 |
[React]styled-component 를 이용한 theme (0) | 2022.03.01 |
[React] props type (0) | 2022.02.28 |
[react] Ant Design (0) | 2022.02.10 |