IndexPage.jsx 코드설명

1. useEffect

// localStorage에서 일기 목록 불러오기

    useEffect (() => {
        const storedDiaries = JSON.parse(localStorage.getItem('diaries')) || [];
        setDiaries(storedDiaries);
    }, []);

이 코드는 React의 useEffect 훅을 사용하여 컴포넌트가 처음으로 렌더링될 때 localStorage에서 일기 목록을 불러와 상태로 설정하는 기능을 합니다. 각 부분을 자세히 설명하겠습니다.

코드 설명

useEffect(() => {
    const storedDiaries = JSON.parse(localStorage.getItem('diaries')) || [];
    setDiaries(storedDiaries);
}, []);

1. useEffect 훅

• useEffect(() => { ... }, []);: useEffect는 사이드 이펙트를 처리하기 위해 React에서 제공하는 훅입니다. 이 훅은 컴포넌트가 렌더링된 이후에 특정 작업을 수행할 수 있도록 합니다.
• 의미: 이 코드에서 useEffect는 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다. 두 번째 인자인 빈 배열 []이 사용된 경우, useEffect는 컴포넌트가 마운트(처음 렌더링)될 때만 실행됩니다.

2. localStorage.getItem('diaries')

• localStorage.getItem('diaries'): localStorage는 브라우저에서 제공하는 웹 스토리지 API로, 키-값 쌍을 저장할 수 있습니다. 여기서 getItem 메서드는 localStorage에 저장된 데이터 중 diaries라는 키에 해당하는 값을 가져옵니다. 이 값은 JSON 문자열 형태로 저장되어 있습니다.

3. JSON.parse(localStorage.getItem('diaries'))

• JSON.parse: localStorage에서 가져온 값은 문자열이므로, 이 문자열을 자바스크립트 객체로 변환하기 위해 JSON.parse를 사용합니다. 이 과정에서 문자열이 JSON 형식으로 되어 있어야 제대로 객체로 변환됩니다.
• 결과: 변환된 객체는 storedDiaries라는 변수에 저장됩니다.

4. || []

• || []: 이 부분은 storedDiaries가 null이거나 undefined인 경우(즉, diaries라는 키가 localStorage에 존재하지 않을 경우) 빈 배열 []을 대신 사용하도록 합니다. 즉, storedDiaries가 없을 때 빈 배열을 초기 값으로 설정하는 것입니다.

5. setDiaries(storedDiaries)

• setDiaries(storedDiaries): 이 부분은 useState로 선언된 상태 변수 diaries를 storedDiaries로 설정합니다. 즉, storedDiaries에 저장된 일기 목록을 상태로 저장하게 됩니다.

요약

이 코드는 컴포넌트가 처음 렌더링될 때 localStorage에서 diaries라는 키로 저장된 일기 목록을 불러와, 그 데이터를 컴포넌트의 상태로 설정하는 역할을 합니다. 이로 인해 사용자는 페이지를 새로고침하거나 재방문했을 때도 이전에 저장된 일기 목록을 볼 수 있게 됩니다.

---

2. localStorage 키-값

`localStorage`를 사용할 때, 데이터를 저장할 때는 항상 "키-값" 쌍으로 저장됩니다. 키(key)는 해당 데이터에 접근하기 위한 고유 식별자 역할을 하고, 값(value)은 실제로 저장되는 데이터입니다.

### `localStorage`에 데이터 저장 방식
```javascript
localStorage.setItem('diaries', JSON.stringify(updatedDiaries));

위 코드에서:

• "diaries"는 키(key)입니다. 이 키를 사용하여 localStorage에 저장된 데이터를 나중에 불러올 수 있습니다.
• JSON.stringify(updatedDiaries)는 값(value)입니다. 이 값은 updatedDiaries 배열을 JSON 형식으로 변환한 문자열입니다.

키(key)와 값(value)에 대한 설명

• 키(key): 데이터를 식별하기 위한 이름입니다. 키는 문자열이어야 하며, localStorage 내에서 고유해야 합니다. 즉, 동일한 키를 사용하면 이전에 저장된 데이터가 덮어쓰여집니다.
• 값(value): 키와 연결된 실제 데이터입니다. localStorage는 데이터를 문자열 형태로만 저장할 수 있으므로, 객체나 배열 같은 복잡한 데이터 구조는 JSON 문자열로 변환한 후에 저장해야 합니다. 이때 JSON.stringify()를 사용하여 데이터를 문자열로 변환합니다.

저장 및 불러오기 과정

1. 저장하기: 데이터를 저장할 때는 localStorage.setItem(key, value)를 사용합니다.

   • 예를 들어, "diaries"라는 키에 updatedDiaries 배열을 저장하려면:

     localStorage.setItem('diaries', JSON.stringify(updatedDiaries));

2. 불러오기: 저장된 데이터를 불러올 때는 localStorage.getItem(key)를 사용합니다.

   • 예를 들어, "diaries" 키에 저장된 데이터를 불러오려면:

     const storedDiaries = JSON.parse(localStorage.getItem('diaries'));

3. 데이터의 형태

   • localStorage에 저장된 데이터는 항상 문자열입니다. 따라서 객체나 배열을 저장할 때는 JSON.stringify()로 문자열로 변환하고, 불러올 때는 JSON.parse()로 다시 객체나 배열로 변환합니다.

키값과 저장 방식 선택

• localStorage에 어떤 데이터를 저장할지, 어떤 키를 사용할지는 개발자가 결정합니다.
• 예를 들어, 일기 데이터를 저장할 때 "diaries"라는 키를 사용한 것은 개발자가 그 데이터를 식별하기 위해 선택한 이름입니다. 다른 데이터가 있다면 다른 키를 사용할 수도 있습니다.

예시

// 예: 사용자 설정을 저장할 때
localStorage.setItem('userSettings', JSON.stringify(settingsObject));

// 예: 쇼핑 카트 데이터를 저장할 때
localStorage.setItem('cartItems', JSON.stringify(cartArray));

요약

• 키(key)는 저장된 데이터에 접근하기 위해 사용되는 고유한 식별자입니다.
• 값(value)은 실제로 저장되는 데이터로, localStorage에서는 문자열 형태로 저장됩니다.
• 개발자는 어떤 데이터를 저장할지, 어떤 키를 사용할지 스스로 결정하고 그에 따라 데이터를 저장하고 불러옵니다.