React의 state를 알아보자

 

1️⃣ 배경

• 자동으로 값이 업데이트되면 UI도 업데이트 시켜주자! 하고 나온 게 리액트
• 하지만 모든 변수가 변할 때마다 렌더링 해주는 건 비효율적이고 부담이 큰 일
• 그래서 나온 게 State 라는 개념 !
• 변수가 바뀐 건 신경쓰지 않음
• 하지만 state가 바뀌었어???????? 그러면 UI 렌더링 해주자!!!!!!!!!!!!

 

 

---

 

 

2️⃣ 방법

① import 해주기

import React, {useState} from 'react';

② useState()

useState란?   리액트에서 제공해주는 유용한 함수 중 하나 ⇒ react hook

funtion App() {
	let count = 0
	const [count, setCount] = useState(0)      // 0은 초기값

• useState() 함수는 배열을 반환함
  • [count2] : 초기값을 담고있는 state 변수
  • [setCount2] : state의 값을 업데이트 해주는 함수

 

③ setCount() 함수를 이용해서 값을 변경해준다.

funtion App() {
	let count = 0
	const [count, setCount] = useState(0)      // 0은 초기값
	const increase = () => {
		count = count + 1
		setCount(count +1)     // setCount() 사용
	}

 

 

---

 

 

3️⃣ 콘솔창에서 왜 state의 값은 한 박자 늦을까?

UI를 바꿔야하는 모든 set함수를 모아서 함수가 끝나면 값을 업데이트하기 시작한다.

⇒ 비동기적이다.

 

 

---

 

 

 

4️⃣ 콘솔창에서 count 변수 값은 왜 영원히 1일까?

컴포넌트를 다시 실행시키니까 count 변수가 계속 초기화 된다.

⇒ 변수는 잠깐 저장해두는 값들을 써야할 때 사용한다.

⇒ 나머지는 state를 쓴다.