리액트 useState (1)

화면에서 자주 바뀔것 같은 부분은 state에 담는다.

 

state 만드는 법

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

이번에 state를 이용해 데이터를 잠깐 저장해보도록 하자.

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

function App(){
 
  let [title,setTitle] = useState('리액트 useState hook');
  let posts = '리액트 JSX 문법';
  return (
    <div className="App">
      <div className="black-nav">
        <h1>동욱의 블로그</h1>
      </div>
      <div className="list">
        <h2>{title}</h2>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

맨 윗줄에 import {useState} from 'react' 하고

원하는 곳에서 useState('보관할 데이터') 쓰면 state에 데이터를 잠깐 저장할 수 있다.

그리고 저장한 데이터를 나중에 쓰고 싶으면

let [title, setTitle] = useState('리액트 useState hook');

배열의 첫번째 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 된다. 

 

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

데이터1 자리엔 '리액트 useState hook'같은 데이터가 들어있고 

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

 

그 데이터들을 각각 변수로 빼고 싶으면 구조분해 할당 문법을 사용해서

let [title, setTitle] = useState('리액트 useState hook')

이러면 되는 것일 뿐이다.

 

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

 

 

 

변수 말고 state에 데이터 저장해서 쓰는 이유 

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

 

function App(){
  let post = '자바스크립트의 역사'

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

let post 변수에 있던걸 {post} 이렇게 데이터바인딩 해놨다고 가정해보자. 

근데 갑자기 post 변수에 있던 데이터를 '자바스크립트의 역사' -> '리액트 JSX 문법' 이렇게 바꿨다.

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

직접 우리가 "변수내용이 바뀌었으니까 html도 고쳐주세요"라고 귀찮게 코드를 짜야한다.

바닐라 자바스크립트는 원래 그래야한다.

 

 

function App(){
  let [post, setPost] = useState('자바스크립트의 역사');

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

이번에는 state를 만들어서 {post} 이렇게 데이터바인딩 해놨다고 가정해보자.

근데 갑자기 state에 있던 데이터를 '자바스크립트의 역사' -> '리액트 JSX 문법' 이렇게 바꿨다.

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

state 데이터는 그럴 필요가 없다. 우리가 개입 안해도 자동으로 html도 바뀐다.

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

 

그럼 뭐가 좋을까?

1. UI 기능 개발도 매우 편리해질 것이다.

2. 사이트가 부드럽게 동작할 것이다.

 

그럼 블로그 로고 같은 그런 데이터도 state로 만들어두고 데이터바인딩 할까?

그래도 된다. 하지만 블로그 로고명은 거의 바뀌지않는다.

바뀌지 않는 데이터들은 굳이 state로 저장할 필요가 없다.

state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것인데

블로그 로고명은 거의 잘 안바뀌니까 의미가 없다.

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

 

 

 

🌈 정리 

• 자주변경될 것 같은 데이터들은 state에 저장했다가 html에 데이터바인딩 하자.
• 변경할 일이 없는 데이터들, 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 된다.