리액트(React)-state에 데이터 담기

데이터 넣는 방법
1. 변수에 넣기
2. state에 넣기

state

state는
1. 변수 대신 쓰는 데이터 저장 공간
2. useState() 함수를 이용해 만들어야 한다.

• 이걸 사용하기 위해 맨 위에

import React, { useState } from "react";

를 추가해줬다.

useState(저장할 데이터) 이런 모습으로 만들어준다.

useState()를 쓰면 데이터 2개가 array형태로 남는다.
이걸 각각 변수 a, b 라는 변수명으로 ES6 Destructing문법을 이용해 저장해 쓰면 된다.

a 변수에는 실제 저장할 데이터가,
b 변수에는 저장한 데이터를 변경시킬 함수가 들어있다.

---

Desctructing 문법이란?

var array = ['Kim', 20];

var name = array[0];
var age = array[1];

array 자료형에서 'Kim'과 20 이라는 데이터를 변수로 저장하고 싶을 때 사용하던 예전 방법.

var [name, age] = ['Kim', 20]

등호 여러번 쓸 필요 없이
왼쪽, 오른쪽 형식을 똑같이 맞춰주면 자동으로 변수가 생성된다.
리액트 사용할 때 익혀두면 좋다.

예)

let [a, b] = useState("서울특별시");

위처럼 사용하면 a, b 라는 변수가 생성되는데,
a라는 변수는 "서울특별시" 라는 데이터가 저장된 state이고
b라는 변수는 "서울특별시"라는 데이터의 변경을 도와주는 함수가 들어있다(아직 뭔지 모름)

그래서

let [글제목, 글제목변경] = useState("서울특별시");

이런 식으로 좀 더 직관적인 변수명을 만들어주면 된다.

---

3. state 데이터도 일반 변수처럼 똑같이 데이터바인딩이 가능하다.

4. 문자, 숫자, array, object 다 저장 가능하다.

---

그렇다면 왜 굳이 state를 사용할까?

웹이 App처럼 동작하게 만들고 싶어서.
즉,
state는 변경되면 HTML이 알아서 자동으로 재렌더링이 된다.

그냥 변수는 변경되어도 재렌더링이 안되고 새로고침이 되어야 한다.

하지만 state로 만든건 새로고침없이도 재렌더링이 된다.

자주 바뀌는, 중요한 데이터는 state에 저장해준다.