그누보드 QA - 간단한 react 여쭤봐도 될까요..? localstorage.

간단한 react 여쭤봐도 될까요..? localstorage.

인찌 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.09.14 17:00:51 조회 874 (211.♡.♡.67)

본문

자식에서 부모컴포넌트로 데이터 보낼 때

localstorage 로 hipage값이 저장되서 새로고침해도 페이지가 유지되게 하려고합니다.

아래 코드로 hipage값이 저장은 되었는데

저장된 값을 어떻게 써도 값이 유지가 안되더라구요.

다른거 찾아봐도 안나와서ㅠㅠ

기초지만 여쭤보고 싶습니다.


 
const App = () => {
 
const [hipage, setHipage] = useState(3)
const getData = (hipage) => {
    localStorage.getItem("page");
    setHipage(hipage);
};
 
return (
    <>
      <div className="oneview">
        {hipage === 0 && (
          <Nicname
            hipage={hipage}
            getData={getData}
            userName={userName}
            onChangeInput={onChangeInput}
          />
        )}
 
        {hipage === 1 && <Date hipage={hipage} getData={getData} />}
 
      </div>
    </>
  );
};

<Nicname> 랑 <Date> 컴포넌트 안에

아래 버튼 코드가 있는데 누르면 hipage 값이 증가 또는 감소하면서 페이지 보이는게 달라집니다.

이전{" "}

</button>

다음{" "}

</button>

</div>

#react

답변 2

아르키어드 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2022-09-14 17:14:26 223.♡.♡.175

이건 contaxt api를 활용하지 않거나 redux같은 상태관리를 사용하지 않으실거면 hipage와 setHipage,

스테이트값과 스테이트를 업데이트 하는 함수 2개를 같이 자식 컴포넌트로 내려주셔서 자식컴포넌트에서 부모에게서 받은 스테이트를 업데이트 하실수있도록 하셔야하며 로컬스토리지에 저장하시러면 리액트의 일반함수에선 setItem을 쓸수 없기에 useEffect를 활용해 hipage값이 변경될때만 hipage를 setItem해주시면 되겠습니다.


// App.js
import { useState, useEffect } from 'react';
const App = () => {
  const [hipage, setHipage] = useState(localStorage.getItem('page') ? localStorage.getItem('page') : 3 );
  useEffect(() => {
    const storageData = localStorage.getItem('page');
    if (!storageData) {
      localstorage.setItem('page', hipage);
    }
  }, [ hipage ]);
  return (
    <>
      <div>
        {hipage === 0 && (
          <Nicname
           hipage={hipage}
           setData={setHipage}
           userName={userName}
           onChangeInput={onChangeInput}
          />
        )}
      </div>
    </>
  )
};
// Nicname.js
import { useCallback } from 'react';
const Nicname = ({ hipage, setData, userName, onChangeInput }) => {
  const onChangeHipage = useCallback((i) => {
    setData(i);
  }, [ hipage ]);
  return (
    <>
      <button onClick={() => onChangeHipage(hipage - 1)}>이전</button>
      <button onClick={() => onChangeHipage(hipage + 1)}>다음</button>
    </>
  )
};