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
- filfox
- 알위브
- nft
- 비트코인
- 파일코인플러스
- 코로나
- 스토리지
- MATIC
- 암호화폐
- Mining
- Q-code
- 투자
- 레이어2
- 파일코인
- 채산성
- 공증인
- datacap
- 이더리움
- 바이낸스
- nft민팅
- FIL
- 채굴
- 가상자산
- 코인
- 민팅
- 데이터캡
- Arweave
- 스토리지코인
- FILECOIN
- BTC
- Today
- 96
- Total
- 125,460
Blockchain & Devops, bitetiger
React.js 상태(State) 본문
반응형
상태라는 것으로 React를 설명할 수 있다고 해도 과언이 아니다.
State란?
배고픔에 대한 상태가 적당함, 배고픔, 배부름을 인간의 허기 상태의 종류다. 이와같이 상태란 계속해서 변화하는 특정 상태며, 상태에 따라 다른 행동을 하게된다.
React에 빗대어 설명하자면, 어떤 컴포넌트가 '상태'를 관리하게 된다.
State 사용 실습
// Counter.js 코드
import React, {useState} from 'react';
const Counter = () => {
//0에서 출발, 1씩 증가, 1씩 감소하는 Counter 상태
const [count, setCount] = useState(0);
//setCount는 count상태를 변화시키는 역할, 0은 초기값
console.log("counter 호출")
const onIncrease = () => {
setCount(count + 1);
}
const onDecrease = () =>{
setCount(count - 1);
}
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
);
};
//컴포넌트는 상태가 변화하면 화면을 다시 그리는 리렌더링을 한다. -> 함수가 다시 호출된다.
export default Counter;
반응형
'개발 > Javascript' 카테고리의 다른 글
자바스크립트의 JSON parse, stringify 간단 정리 (0) | 2022.07.11 |
---|---|
React.js 프롭스(Props) (0) | 2022.06.20 |
React.js (JSX) 실습해보기 - 2 (0) | 2022.06.19 |
React.js (Create React App) 실습해보기 - 1 (0) | 2022.06.19 |
vscode, Prettier 설치로 저장할 때 자동 정렬 맞추기 (0) | 2022.03.10 |
0 Comments