react로 웹서비스를 만들때 데이터를 보관하는 방법은 크게 2가지가 있다
리엑트의 데이터 저장공간 state 만드는 법
import React, { useState } from 'react';
//useState라는 리엑트 내장함수를 사용할수 있다.
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스// ES6 Destructuring
const arr = [1, 2, 3];
// 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당
// 변수 one, two, three가 선언되고 arr(initializer(초기화자))가 Destructuring(비구조화, 파괴)되어 할당된다.
const [one, two, three] = arr;
// 디스트럭처링을 사용할 때는 반드시 initializer(초기화자)를 할당해야 한다.
// const [one, two, three]; // SyntaxError: Missing initializer in destructuring declaration
console.log(one, two, three); // 1 2 3
useState는 배열형태의 2개의 데이터가 있음
⇒[state데이터, state 데이터 변경 함수]
function App() {
let posts = 'test title';
**let[글제목, 글제목변경] = useState('남자 코드 추천');**
let cssClass = { color : 'blue', fontSize : '30px'};
return (
<div className="App">
<div className='black-nav'>
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{ 글제목 }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
);
}
state에 데이터를 저장하는 이유
⇒ state로 만들어진 데이터는 해당 데이터가 변경이 될 경우 HTML이 자동으로 재렌더링된다.
자주 바뀌는, 중요한 데이터는 변수가 아닌 state로 저장해서 사용!