localStorage 질문입니다.

[강성구]

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

function Change() {
  const [따봉, 따봉변경] = useState(
    () => JSON.parse(localStorage.getItem("따봉")) || 0 
  );
  
  useEffect( () => {
    localStorage.setItem("따봉", JSON.stringify(따봉));
  }, [따봉]);

  function 정렬하기() {
    const newArray2 = [...글제목];
    글제목변경(newArray2.sort());
  }

  const [글제목, 글제목변경] = useState(['논산', '강남', '동대문']);

  function 제목바꾸기() {
    const newArray = [...글제목];
    newArray[0] = '삼성';

    localStorage.setItem("here", JSON.stringify(newArray));
    글제목변경( JSON.parse(localStorage.getItem("here")) );
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>hello world</div> 
      </div>
      <button onClick={ 제목바꾸기 }> 버튼1 </button>
      <button onClick={ 정렬하기 }> 버튼2 </button>

      <div className="list pointer">
        <h3 className="pointer"> 
          {글제목[0]}
          <span onClick={ () => { 따봉변경(따봉+1)}} > ? </span> {따봉} 
          <span onClick={ () => { 따봉변경(따봉-1)}} > ? </span>
        </h3>
      </div>
    </div>
  )
}

export default Change;

/////////////////////////////

사진첨부 기능이 있었으면 더 보시기 편하셨을텐데 일단 급한데로 붙여넣기 할게요!

버튼 1을 눌렀을 때 논산 글자가 삼성으로 바뀌면서 새로고침을 해도 그대로 남기고싶은데 계속 처음으로 돌아가네요.

버튼을 눌렀을때에 대한 setItem은 성공했는데 글자 바꾸기를 한 거에 대해선 어떤식으로 setItem, getItem해야하는지 자문 구합니다.

감사합니다.

[codingapple]

사이트 혹은 컴포넌트 로드시 로컬스토리지에 있던 here을 불러와서 글제목이라는 state에 집어넣으면 됩니다 

그러려면 useEffect만들고 거기 안에다가 getItem() 하고 글제목 state에 집어넣으시면 될듯요? 

[글쓴이]

글