state

state는 변수 대신 쓸 수 있는 데이터 저장 공간이다.

unction Main() {
  let posts = '메롱'
  return (
    <div className = "Main">
    <div className="list">
      <h3> { posts } </h3>
      <p>8월 23일</p>
      <hr/>
    </div>
      <div className="list">
      <h3> { posts } </h3>
      <p>8월 24일</p>
      <hr/>
      </div>
    </div>
  )
}

함수를 이용해서 글 제목과 작성일 내용이 포함 된 두 개의 게시글을 만들었다.

import React,{useState} from 'react';

state를 사용하기 위해서 첫 줄 React 뒤에 ,를 찍고 {useState}를 써준다. 리액트의 내장함수 useState를 사용하겠다는 의미다.

function Main() {

  let[글제목,글제목변경] = useState('메롱롱');
  let posts = '메롱'
  return (
    <div className = "Main">
    <div className="list">
      <h3> { 글제목 } </h3>
      <p>8월 23일</p>
      <hr/>
    </div>
      <div className="list">
      <h3> { 글제목 } </h3>
      <p>8월 24일</p>
      <hr/>
      </div>
    </div>
  )
}

state의 형식은 let[a,b]=useState('내용');이며 a에는 ''안의 내용이 데이터로 들어가며 b는 데이터를 변경하기 위한 함수이다. 오늘은 a만 사용한다. 그리고 posts가 있던 자리에 a를 써주면 된다.

  let[글제목,글제목변경] = useState(['메롱롱','메롱롱롱']);
  let posts = '메롱'
  return (
    <div className = "Main">
    <div className="list">
      <h3> { 글제목[0] } </h3>
      <p>8월 23일</p>
      <hr/>
    </div>
      <div className="list">
      <h3> { 글제목[1] } </h3>
      <p>8월 24일</p>
      <hr/>
      </div>
    </div>

이런식으로 배열을 만들어서 글제목을 다르게 해 줄 수 있다.




사용해보면 state보다 함수가 더 편한 느낌이 든다. 하지만 state를 사용하게 되면 새로고침 없이도 자동으로 재랜더링이 된다. 따라서 수정이 필요한 경우에는 데이터를 state로 저장하는 습관을 들이자!