REACT - state 만들기, 사용하는 이유

state 만드는 방법 

1. useState import 하기

import { useState } from 'react'

 

2. useState('보관할 자료') 설정하기

useState('보관할 자료')

 

3. let 변수에 담기 ( destructuring 문법)

let [변수명, set변수명] = useState('저장할 자료')

 

* destructuring 문법은 무엇일까? (코딩애플 강의의 설명이 이해가 안가서 GPT 에게 물어보았다)

1. useState(0)은 현재 상태값과 상태 변경 함수를 배열로 반환합니다.
   • [현재 상태값, 상태 변경 함수]
2. (0)은 상태의 초기값입니다.
   • 즉, count의 시작값은 0으로 설정됩니다.
3. 구조 분해를 사용해서 이 배열을 두 변수 count와 setCount로 나눠 쓰는 거예요.

React에서 상태를 다루는 데 꼭 필요한 두 가지를 반환하는 거라고 생각하면 이해가 더 쉬울 거예요! 😊

 

 

-> 결국 useState는 현재 상태값과 상태 변경 함수라는 2가지 요소를 반환하기 때문에, 구조 분해를 사용해서
그 두 가지를 변수로 나눠서 사용하는 것 !

---

왜 변수 대신 state를 사용할까?

변수는 데이터를 잠깐 보관하는 용도로 충분하지만, React의 state는 데이터가 변경될 때 해당 데이터를 사용하는 화면을 자동으로 재렌더링해준다. 이 자동 업데이트 기능이 state를 사용하는 핵심 이유이다.

 

 

* 자동으로 재랜더링 된다는게 뭘까? 그냥 let {변수} 써서 저장해도 로컬 서버 미리보기에서 바뀌는데?? (GPT 질문) 

• let 변수: 값은 바뀌지만, React는 그 변화를 감지하지 못함. 화면 업데이트는 수동으로 처리해야 함.
• state: 상태가 변경되면 React가 그 변화를 감지하고, 화면을 자동으로 재렌더링해줌.

결론적으로, state는 화면과 상태를 동기화하는 React의 기본 도구입니다. 😊

---

 

초보 레벨로 정리

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓자

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 된다

 

---

 

*출처 : 코딩애플 REACT 강의 + GPT