[React] localStorage 로 DB 없이 데이터 저장하기

💡 실습 포인트!

• 강사님의 localStorage 수업을 들은 후에, "최근 본 상품" 기능을 만드는 가이드를 활용하여 내가 생각한 대로 "최근 본 상품" UI 를 만들고 기능을 구현해보았다.
• 처음 이 기능을 만들 때만 해도 막막했는데, 에러코드를 읽어가며 아쉬운 부분을 하나하나 추가, 수정해나가다보니 어느덧 꽤 그럴싸한 형태로 만들어졌다.

---

💜 localStorage 사용법 알아보기

• 새로고침을 하면 JS 파일들을 모두 처음부터 다시 읽어들이기 때문에 당연하게도 모든 state 의 데이터는 초기화된다.
• 이렇게 state 에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB 에 저장하면 되는데, 만약 별도의 서버나 DB 지식이 없다면 localStorage 에 저장하는 방법이 있다.
• localStorage 는 브라우저에 몰래 정보를 저장할 때 사용할 수 있는 공간이다.

🤍 localStorage 찾아보기

• Chrome 개발자도구에서 Application 탭에 들어가면 좌측 Storage 하위 목록인 Local Storage 를 확인할 수 있다.
• 각 사이트마다 5MB 정도의 텍스트, 숫자 데이터를 저장할 수 있으며 사용자가 브라우저 청소를 하지 않는 이상은 영구적으로 남아있다.

---

🤍 localStorage 문법 알아보기

// 데이터 추가
localStorage.setItem('데이터이름', '데이터');

// 데이터 조회
localStorage.getItem('데이터이름');

// 데이터 삭제
localStorage.removeItem('데이터이름');

• JavaScript 파일 어디서든 위와 같은 문법을 사용하면 데이터 입출력이 가능하다.
• 데이터를 추가할 때에는 object 자료형처럼 key:value 의 형태로 데이터가 저장된다.
• 제대로 저장이 되었는지 확인하고 싶다면 Application 탭의 localStorage 에서 확인하면 된다.

---

🤍 localStorage 에 object / array 저장하기

localStorage.setItem('obj', JSON.stringify({name:'Seoyun'}) );

• localStorage 는 순전히 텍스트 자료형만 저장이 가능하기 때문에, object 자료형이나 array 자료형은 바로 저장하는 것이 불가능하다.
• 하지만 꼭 object 자료형 혹은 array 자료형을 저장해야 한다면, 텍스트 자료로 인식할 수 있도록 따옴표를 쳐서 JSON 의 형태로 바꿔준 뒤에 저장하면 된다.
• 매번 따옴표를 붙여주는 것은 번거롭기 때문에 JSON.stringify() 라는 함수 안에 object 자료형이나 array 자료형을 넣어주면 쉽게 JSON 형태로 변환이 가능하다.

• 이제 위와 같이 localStorage 에 { "name" : "Seoyun" } 이라는 형태로 저장된 것을 볼 수 있다.

---

🤍 localStorage 에 저장된 object / array 꺼내어 사용하기

• 이렇게 localStorage 에 저장된 데이터는 다시 꺼냈을 때 JSON 의 형태 그대로 나오기 때문에 object 자료형이나 array 자료형처럼 데이터를 조작하는 것이 불가능하다.
• 따라서, 이런 JSON 형태의 데이터를 다시 object 자료형 혹은 array 자료형으로 변환해주는 과정이 필요한데 이 때 JSON.parse() 함수를 사용하면 된다.

---

💜 최근 본 상품 UI 및 기능 만들기

• 쇼핑몰 같은 곳을 보면 최근 본 상품이라고 해서 특정 위치에 사용자가 이제껏 본 상품들을 띄워주는 경우가 있다.
• 이번 수업에서 배운 localStorage 를 활용해서 이런 최근 본 상품 UI 와 기능을 만들어보았다.

🤍 최근 본 상품들을 순서대로 localStorage 에 저장하기

• 강사님의 코드도 좋았지만 내가 생각하는 방식과는 조금 달라서 나는 다른 방식으로 코드를 작성했다.
• 내가 생각한 방식은 다음과 같다.
  • 일단 최근 본 상품은 중복되는 상품 없이 세로 정렬하여 딱 3개만 보여준다.
  • 최근 본 상품의 순서는 맨 위에 제일 최근에 본 상품이 오게 한다.
  • 만약 보았던 상품을 다시 보게 된다면 제일 최근에 본 기록 기준으로 중복 체크하여, 한 번만 최근 본 상품에 표시한다.
    (Set 함수를 사용하는 것이 제일 편한데, 이 함수는 중복인 경우 앞 순서의 기록을 남기고 뒷 순서 기록을 삭제해버리므로 코드를 작성하는 데에 고민을 좀 많이 했다.)

// 전체 코드 미리보기

useEffect(()=>{
    if (localStorage.watched === undefined ) {
      localStorage.setItem('watched', JSON.stringify([]));
    }
    let watched = JSON.parse(localStorage.getItem('watched'));
    watched.unshift(id);
    watched = [...new Set(watched)].slice(0,3);
    localStorage.setItem('watched', JSON.stringify(watched));
}, [])

• 사용자가 특정 상품을 클릭하여 상세 페이지로 접속하면, 그 상세 페이지 내의 상품이 localStorage 에 저장되어야 한다.
• 따라서 Detail Component 가 생성되자마자 기록할 수 있게 useEffect() 에 코드를 작성해주었다.
• 먼저, 최근 본 상품들이 무엇인지 기록하는 기능이 필요한데, 나는 watched 라는 변수명으로 localStorage 에 array 형식으로 기록해주기로 했다.

 

if (localStorage.watched === undefined ) {
  localStorage.setItem('watched', JSON.stringify([]));
}

• 이 때, 생각해야 할 것은 처음 상품을 클릭하여 상세 페이지에 접속하는 경우에는 localStorage 에 watched 라는 array 가 존재하지 않으므로(undefined 상태에 해당) 우선 비어있는 watched 라는 array 를 만들어주어야 한다는 것이다.

 

let watched = JSON.parse(localStorage.getItem('watched'));
watched.unshift(id);
watched = [...new Set(watched)].slice(0,3);
localStorage.setItem('watched', JSON.stringify(watched));

• 그렇다면 이전에 상품을 클릭하여 상세 페이지에 접속한 적이 있다면?
• 그러면 지금 상세 페이지의 url 의 id 파라미터를 watched 라는 array 에 추가해주면 된다.
• 나는 최신순으로 정렬한 후에 중복을 제거하고 세 개를 뽑아 위에서부터 최신순으로 정렬할 거라 위와 같이 코드를 작성해주었다.
  ( push() 함수에 꽂혀서 array 를 뒤집어야 하나 Set() 함수 말고 다른 방법을 찾아서 중복을 해야하나 고민이 길어졌다....unshift() 써서 그냥 최근에 본 상품을 watched 맨 앞부분에 끼워주면 되는 것을...)
• id 는 이전에 usePrams() 를 사용한 적이 있으므로 그대로 재활용했다.  
• 위 코드를 해석하자면 다음과 같다.
  • localStorage 에 저장된 watched 를 다루기 위해 JSON.parse() 를 사용하여 array 형태로 만든 후 watched 라는 변수명으로 저장한다.
  • 상품을 클릭해서 상세 페이지에 접속할 때마다, 최신순으로 저장될 수 있도록 해당 페이지의 상품 id 를 watched array 의 맨 앞으로 넣는다.
  • 중복을 제거하기 위해 new Set() 에 담고 spread 문법으로 괄호를 벗겨준 다음, slice() 를 사용하여 3개만 watched 에 저장한다.
  • 저장한 watched 를 JSON.stringify() 하여 JSON 상태로 만든 다음 localStorage 에 저장해준다.

---

🤍 최근 본 상품 UI 만들기

• 최근 본 상품 UI 가 메인 페이지, 상세 페이지, 장바구니 페이지에서 모두 보였으면 해서, 아예 Watched 라는 이름의 Component 로 만들어주었다.
• 그리고 UI 디자인을 이번에는 styled-components 라이브러리를 이용하지 않고, scss 파일을 만들어서 진행했다.

• 대략적으로 디자인하는 과정을 미리 보면서 진행하고 싶어서 Watched.js, Watched.scss 파일을 만든 후에 App.js 에 import 한 후 라우팅을 하여 해당 url 에서 하드코딩부터 진행해보았다.

---

🤍 Watched Component 를 메인 페이지에 import 하기

• 이 과정 역시 험난했다... 
• 기존에는 Data.js 에 3개의 데이터만 있고 axios 를 이용하여 불러왔었는데, 왜인지 아무리 불러와도 무한로딩처럼 작동을 좀 이상하게 하기에 그냥 데이터 전체를 Data.js 파일에 넣어주었다.

let [shoes, setShoes] = useState(Data.slice(0,3));

• 이로 인해 기존의 기능에 문제가 발생하지 않도록 shoes 라는 state 가 Data.js 파일에서 데이터를 3개만 가져오도록 수정을 해주었다.

 

// shoesAll state 생성

let [shoesAll, setShoesAll] = useState(Data);


// Main Component 로 shoesAll, setShoesAll state 전송

<Route exact path='/'>
  <Main shoes={shoes} setShoes={setShoes} shoesAll={shoesAll} setShoesAll={setShoesAll}/>
</Route>

• 그리고 shoesAll 이라는 state 를 App.js 파일에 만들어서 shoesAll, setShoesAll 모두 Main Component 로 전송해주었다.

 

<Watched shoesAll={props.shoesAll} setShoesAll={props.setShoesAll}/>

• 이제 Main.js 파일의 적당한 위치에 Watched Component 를 넣어주면 된다.
• 이 때, props 로 받아온 shoesAll 과 setShoesAll 을 Watched.js 에 있는 Watched Component 에서 사용할 수 있도록 다시 전송을 해주었다.

---

🤍 Watched Component 에 데이터바인딩하기

// 전체 코드 미리보기

function Watched (props) {

    let watchedAll = JSON.parse(localStorage.getItem('watched'));
    let findWatched = [];
    if (watchedAll !== null){
        for(let i = 0; i < watchedAll.length; i++) {
            findWatched.push(props.shoesAll.find(function(item) {
                return item.id === parseInt(watchedAll[i]);
            }));
        }
    }

    let history = useHistory();

    return (
        <div className='watched'>
            <p className='item'>최근 본 상품</p>
            {
                findWatched.map((watched, idx)=>{
                    return (
                        <div className="watched-item" key={idx} onClick={()=>{ history.push(`/detail/${watched.id}`) }}>
                            <img src={`https://codingapple1.github.io/shop/shoes${watched.id + 1}.jpg`} alt="item" />
                            <p className='name'>{watched.title}</p>
                        </div>
                    )
                })
            }

        </div>
    )
}

• 다양한 반복문 사용에 적응이 필요해서, for 반복문과 map() 함수 둘 다 사용하여 데이터바인딩을 해보았다.
• 이전에 상세 페이지에서는 기존 데이터의 id 와 url 파라미터에 해당하는 id 를 비교하여 하나만 데이터를 찾아오는 것이었다.
• 이번에는 유사하지만 일치하는 id 의 데이터를 최대 3개를 찾아와야했기에, 찾아낸 object 형식의 데이터들을 findWatched 라는 배열을 만들어서 넣어주기로 했다.
• 그리고 그 찾은 데이터를 map() 을 통해 데이터바인딩까지 해주면 완료!

 

    let watchedAll = JSON.parse(localStorage.getItem('watched'));
    let findWatched = [];
    if (watchedAll !== null){
        for(let i = 0; i < watchedAll.length; i++) {
            findWatched.push(props.shoesAll.find(function(item) {
                return item.id === parseInt(watchedAll[i]);
            }));
        }
    }

• 먼저 위 코드부터 해석하자면 다음과 같다.
  • localStorage 에 저장된 watched 라는 array 를 데이터 조작이 가능하도록 JSON.parse() 하여 받아온 다음 watchedAll 이라는 변수명으로 저장한다.
  • 이제 watched 에 담겨있는 id 를 의미하는 요소들과 기존 데이터의 id 를 비교하여 일치하는 것만 담을 findWatched 라는 빈 array 를 만든다.
  • watchedAll 이 비어있는 경우 생길 오류가 생기므로 null 값이 아닐 때에만 for 반복문을 돌려준다.
  • props 로 받아온 shoesAll 이라는 state 요소의 id 와 watchedAll[0], watchedAll[1]... 의 문자를 숫자로 변환한 값을 비교하여 일치하는 것만 findWatched 에 push() 함수로 추가해준다.

 

function Watched (props) {

    let history = useHistory();

    return (
        <div className='watched'>
            <p className='item'>최근 본 상품</p>
            {
                findWatched.map((watched, idx)=>{
                    return (
                        <div className="watched-item" key={idx} onClick={()=>{ history.push(`/detail/${watched.id}`) }}>
                            <img src={`https://codingapple1.github.io/shop/shoes${watched.id + 1}.jpg`} alt="item" />
                            <p className='name'>{watched.title}</p>
                        </div>
                    )
                })
            }

        </div>
    )
}

• 이제 findWatched 에 저장된 데이터를 가지고 map() 함수로 반복문을 돌려 필요한 위치에 데이터바인딩을 해준다.
• 이 때 onClick 속성을 추가하여 useHistory() 기능을 넣어주었다.
• 그래서 최근 본 상품의 해당 이미지 및 상품명을 클릭하면 상세 페이지로 바로 이동할 수 있게 되었다.