자꾸 바뀌는 데이터는 State에 담아요! (변수 ㄴㄴ)

예전에는 그냥 let post = '어쩌구' 이런식으로 변수에 데이터를 저장했었는데

리액트에서는 변수말고 state 를 만들어서 데이터를 저장해둘 수 있어요

 

 

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

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{a}</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

0. 맷윗줄에 import {useState} from 'react'

1. useState('보관할자료') 라고 쓰면 state에 자료를 잠깐 저장할 수 있습니다

2. 이 state를 쓰고 싶으면, let[a,b] = useState('남자 코트 추천');

a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 된다.

 

 

 

let[a,b] = useState('남자 코트 추천'); // [데이터1,데이터2]

let [a,b]는 무슨 문법일까요? 

자바스크립트 destructuring 문법인데, 내가 array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법입니다.

 

예를들어서 ['kim', 20] 이렇게 생긴 array 자료들을 만들어놨는데 거기서 각각 kim이랑 20이라는 자료를 각각 변수에 저장하고 싶으면

let array = ['kim',20];

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

이렇게 해도 되는데

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

도 가능합니다

귀찮게 등호 여러번 쓰지 않아도 왼쪽, 오른쪽 형식을 맞춰주면 자동으로 변수가 생성됩니다

이게 변수만들때 쓰는 destructuring(구조분해할당) 문법입니다~

 

 

다시 리액트로 돌아가서

useState()를 쓰면 그자리에 [데이터1,데이터2] 이렇게 생긴 이상한 array 가 남습니다

데이터1 자리엔 '남자코트추천'같은 자료가 들어있고

데이터2 자리엔 state 변경을 도와주는 함수가 들어있습니다

 

그 데이터들을 각각 변수로 빼고 싶으면

let[a,b] = useState('남자 코트 추천')

let[a,b] = useState('남자 코트 추천');

이렇게 쓰면 됩니다

 

 

변수를 좀더 직관적으로 작명하면

let[글제목,b] = useState('남자 코트 추천');

function App(){
 
  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

저장해보면 진짜 글제목 부분에 '남자 코트 추천'이 나오는군요.

그래서 결론은 리액트에선 일반 변수대신 state 이용해도 자료를 잠깐 저장해둘 수 있다는겁니다.

 

 

 

 

왜 state를 쓸까?

 

state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해줍니다.

쉽게 말해서, state는 변경이 일어나면 html코드를 따로 변경해달라고 코드를 안짜도 됩니다!

 

 

function App(){
  let [글제목, b] = useState('남자 코트 추천');

  return (
    <h4>{ 글제목 }</h4>
  )
}

▲ 이번엔 state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해봅시다.

근데 갑자기 state에 있던걸 '남자 코트 추천'  -> '여자 코트 추천' 이렇게 바꿨습니다. 

그 변경사항도 html에 반영되게 하고 싶으면 어떻게 하냐고요? 

state자료는 그럴 필요 없습니다. 개입 안해도 자동으로 html도 바뀝니다.  

 

 

 

어떤 경우에 state 를 쓸까?

 

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓읍시다!

1. 변경할 일이 없는 데이터들

2. 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 된답니다~

 

 

 

 

 

 

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

function App() {

  let post ='강남 우동 맛집';
  let [글제목1,b1] = useState('여자코트추천');
  let [글제목2,b2] = useState('강남우동맛집');
  let [글제목3,b3] = useState('파이썬독학')

  return (
    <div className = 'App'>
    <div className ="black-nav">
      <h4>ReactBlog</h4>
    </div>
    <div className='list'>
    <h4>{글제목1}</h4> 
    <p>2월 17일 발행</p>
    </div>
    <div className='list'>
    <h4>{글제목2}</h4> 
    <p>2월 17일 발행</p>
    </div>
    <div className='list'>
    <h4>{글제목3}</h4> 
    <p>2월 17일 발행</p>
    </div>
    </div>
  );
}

export default App;