[React] state 사용법 및 사용하는 이유

import React, { useState } from 'react'; // useState를 사용하기 위해 import
import './App.css'

function App(){
 
  let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] }</h3> // 위 글제목에서 [0] 인덱스가 출력
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3> 위 글제목에서 [1] 인덱스가 출력
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

 

먼저 위 코드를 입력하고 구동시키면 useState로 데이터 바인딩을 한 결과를 볼 수 있다.

state에는 Array, Object 어떤 타입이든 대입할 수 있다.

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

힘들게 state를 만들어 써야하는 이유가 있다.

“state가 변경될 때 자동으로 관련된 DOM을 재렌더링 되게 만들어야 한다" 

그럴 땐 변수 말고 state에 값 저장해서 데이터 바인딩 해야한다.

좀더 정확하게 SPA로 웹을 개발하고 싶으면 state를 사용해야 한다는 말이다.

 

 

지금 state로 글제목을 하나 만들었다

근데 버튼을 눌러서 state를 수정해야 할때 수정사항이 DOM에 반영되게 만들고 싶으면 글제목을 state로 선언한뒤 사용해야한다.

 

리액트는 state가 수정이 일어나면

state가 포함된 DOM을 재렌더링 해준다.

 

사용자가 버튼을 클릭하여 글제목이라는 state가 ‘여자 코트 추천’ 변경되면

<h3> 남자 코트 추천</h3> 이 부분을

<h3> 여자 코트 추천</h3> 으로 페이지 새로고침 없이 재렌더링 해준다는 소리이다.

 

SPA를 만들고 싶으면 state에 변경이 필요한 데이터들은 저장해 사용해야 한다.

(일반 변수는 변경이 발생해도 자동으로 재렌더링 해주지 않는다.)