컴포넌트가 마운트 됐을 때, 로컬 스토리지에 데이터가 있는지 확인하고, 없으면 데이터를 추가하고 새로고침 없이 렌더링하는 방법

---

왜 이런 문제를 겪었는가?

원티드 프리온보딩 코스 중 휴먼 스케이프 과제를 했었다. 나는 광고 카드를 렌더링 해주는 역할이었는데, 광고카드 추가 기능이 있어 구현하려고 했다.

내가 생각해본 방식은

1. 컴포넌트가 마운트 됐을 때, 로컬 스토리지에 데이터가 있는지 없는지 체크하고, 없다면 고정된 4개의 광고 카드를 넣어주고, 데이터가 있으면 고정된 4개의 광고 카드를 불러온다.
2. 광고 카드를 추가하면, {…data, {} }로 배열에 기존 광고 카드 + 새로운 광고카드 즉 5개 카드 정보를 넣어준다.
3. 광고 카드가 추가되면, 로컬 스토리지에 다시 아이템을 요청해 업데이트 된 데이터를 가져온다.

웃긴 건 뭐냐. 3번까지도 못 갔다.

1번에서 4개의 고정 광고 카드를 렌더링 해줘야 하는데, 새로고침 없이는 안 됐다. 해당 코드가 자세히 기억에 나진 않지만 대충 보자.

useEffect(() => {
	const res = store.getItem('data')
	
	if(!res) {
		store.setItem('data', 4개의 고정 카드 정보)
		store.getItem('data')
	}
},[])

뭐 대충 이런식이었는데, 정확히 기억은 안난다.

해답

const Home = () => {
  const [datas, setDatas] = useState(undefined)

  useMount(() => {
    const res = localStorage.getItem('data')

    if (!res) localStorage.setItem('data', JSON.stringify({ name: 'chiho' }))
    else setDatas(JSON.parse(res))
  })

  return <div>{datas && <div>{datas.name}</div>}</div>
}

useState를 사용하니 아주 잘 됐다.

개인적인 생각으론 undefined에서 data가 setState되고, 리렌더링이 한번 일어나서 제대로 렌더링이 일어나는 거같다.