[React] 3. useState

● React에서 변수 보관 방법

    1) 변수 사용

    2) state 사용

        - 변수 대신 쓰는 데이터 저장공간

        - useState()를 이용해 만들어야 함

        - 문자, 숫자, Array, Object 모두 저장 가능

 

 

● state 사용 방법

    1. import React, {useState} from 'react'; 추가

        ·  "React에 있는 내장함수 하나를 쓰겠다."라는 뜻

    2. useState('데이터') 선언

         · 데이터 2개가 들어있는 배열로 남음

         · [state 데이터( 입력한 진짜 데이터), state 데이터 변경 함수( 진짜 데이터를 수정해주기 위한 함수)]

         · 아래 ES6 destructuring 문법 참고

 

● state 사용 이유

👉 Web이 App처럼 동작하게 만들고 싶어서

    - state 데이터가 변경되면 HTML 자동 재렌더링 됨
      Ex) 글 제목이 갑자기 수정이 될 때 새로고침 없이 HTML 렌더링 되어서 수정된 제목으로 자동 변경

    - 자주 바뀌거나 중요한 데이터는 변수 대신 state로 저장해서 사용하는 것이 좋음

 

 

 

❕ES6 destructuring 문법

    - Array, Object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용

 

// var a = 10; var b = 10;
var [a, b] = [10, 100];

 

 

 

---

참고

• 코딩애플 - React 기초 3강 : 리액트에선 변수말고 state 만들어 쓰랬죠 (useState)
  https://www.youtube.com/watch?v=Qb8Oiy8i9IY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=5