[React_study] 중요한 변수를 담는 state

* state 사용 하는 방법

- 자바스크립트에서는 var, const, let를 이용해 변수를 선언 및 할당하였다.

- 리액트에선 변수 말고 state를 만들어서 데이터를 저장할 수 있다.

 

* state사용 예시 코드

import { useState } from 'react';
import './App.css'

function App(){
 
  let [blogTitle, setBlogTitle] = useState('Welcome Blog');
  
  return (
    <div className="App">
      <div className="nav-bar">
        <div>{blogTitle}</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

• useState를 import해준다.
  
  • import {useState} from 'react'
• useState('저장할 값')
• const [title, setTitle]  = useState('test');
  • 자바스크립트 destructuring문법을 이용해서 array안에 있는 데이터들을 변수로 저장한다.

---

* 간략한 destructuring 예시 코드

- destructuring를 사용하지 않은 코드

let array = ['Kim', 20];

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

- destructuring를 사용한 코드

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

• 왼쪽 오른쪽 형식을 똑같이 맞춰주면 자동으로 알아서 변수가 생성된다.
• 변수를 만들 때 사용하는 destructuring문법이다.
• 리액트에서 많이 사용된다.
  • 리액트는 일반 변수대신 state 이용해도 자료를 잠깐 저장해둘 수 있다.

---

* 변수 말고 state에 데이터를 저장해서 사용하는 이유

• state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재렌더링해준다.

function App(){
  const title  = 'title입니다.'

  return (
    <h4>{ title }</h4>
  )
}

- 만약 title변수에 할당되어 있던 값을 {title} 이렇게 데이터바인딩을 하였을때

갑자기 title변수에 할당되어있던 값이 'title이 아닙니다.' 라고 변경사항이 생기면 vanilla javascript는 

'변수 내용이 변경되었으니 html도 재렌더링해주어라' 라는 내용의 코드를 짜야한다. 

 

function App(){
  const [title, setTitle] = useState('title입니다.');

  return (
    <h4>{ title }</h4>
  )
}

- 이번엔 state를 이용하여 {title} 데이터바인딩을 하게되면 state에 할당되어있던 값이 변경되면 state자료는 우리가 코드를 짜서 개입을 하지 않아도 자동으로 html이 바뀐다.

- state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링해주기 때문이다.

 

따라서 state를 사용하면

• UI기능 개발도 매우 편리해진다.
• 부드럽게 사이트가 동작한다.

 

[참고]

블로그 로고 같이 아예 바뀔 일이 없는 데이터는 state로 굳이 저장할 필요가 없다.

변경할 일이 없는 데이터들은 변수에 값을 할당해도 된다.

state를 쓰는 이유는 자동으로 html을 재렌더링 해주기 때문이다. 따라서

state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들 위주로 저장하는것이 좋다.