State

react로 웹서비스를 만들때 데이터를 보관하는 방법은 크게 2가지가 있다

1. 변수

2. state

리엑트의 데이터 저장공간 state 만드는 법

1. useState 상단에 첨부

 import React, { useState } from 'react';
//useState라는 리엑트 내장함수를 사용할수 있다.

1. useState(데이터)

• (참고) ES6 destructuring문법 es5에서 배열의 각 요소를 배열로부터 디스트럭처링 하여 변수에 할당하기 위한 방법은 아래와 같다

  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로 저장해서 사용!