State

State란?

자료의 상태를 저장해두는 일종의 변수.

useState (https://ko.reactjs.org/docs/hooks-reference.html#usestate)

---

기본적으로 변수는 let, var, const 형태로 선언하고 자료를 저장해두는 역할을 한다.

react는 변수를 state 형태로 저장해둘 수 있는데, 아래와 같이 사용한다.

// import useState
import { useState } from 'react';

// useState 변수 지정
let [state, setState] = useState(content);

 

Destructured 문법

// 일반적인 배열 선언 및 배열의 값을 변수로 할당하는 과정.
let num[2] = [1, 2];
let a = num[0]; // 1
let c = num[1]; // 2

// 위 과정을 destructured 문법으로 변경하면
let [a, c] = [1, 2];

 

변수와 state의 차이

• 일반 변수를 사용하는 경우, 변수 내용이 변경되면 HTML에 즉시 반영되지 않아 별도의 처리가 필요하다.
• state를 사용하면 state 내용이 변경될 때 state가 참조된 HTML 영역이 자동으로 재렌더링 된다.