WIL - 투두 리스트 리덕스 이해하기/고유값 패키지 라이브러리 UUID, shortID/Redux DevTools

리액트를 공부하면서 react-router-dom, styled-components, redux를 사용하여 할일 목록, 완료 목록을 구분하는 투두리스트 웹페이지를 만들어봤다.

기존에 useState 훅을 사용해서 만들었던 투두리스트는 한 페이지 내에서 끝나는 프로젝트였지만, 이번에는 홈페이지와 상세페이지를 가지며 이를 위해서는 특정 id값에 따른 값을 불러와 상세페이지로 이동해야했다. 이 과정에서 리덕스를 사용해 정보를 불러오고 업데이트하도록 만드는것과, 특정 id값이 불러와지지 않는 어려움이 있었다.

1. 리덕스에 대한 개념에 대해 이해하고 사용하는 방법을 익히는데 어려움이 있었다.

리덕스는 현시점 가장 많이 쓰는 자바스크립트 전역 상태관리 라이브러리로,  store, 즉 외부저장소에 대한 개념을 이해하고 사용법을 익혀야했다. 

 

참고 | https://blog.ldtalentwork.com/2020/07/02/how-to-create-a-custom-redux-saga-template-with-cra/

 

UUID를 사용해 각 state값을 불러와 detail 페이지로 보내주려고 하였으나 실패했다.

알고보니 UUID는 페이지가 바뀌면서 리셋되는 성격을 가지고 있었고, 이후 UUID 대신 ShortID 도구를 사용해 해당문제를 해결했다.

좀 더 구체적으로 이야기하면, UUID는 Universally Unique Idenfitier의 약자로 특정 알고리즘에 따라 무작위로 고유값이 생성되며 대규모 분산 시스템에서 고유성 보장을 위해 많이 사용할 정도로 중복 가능성이 매우 낮은 도구라고 한다.

UUID로 준 고유값 예시(길다길어)

ShortID는 말그대로 짦은 길이의 고유한 식별자를 생성하기 위한 라이브러리이고!

ShortID로 준 고유값 예시

UUID와 비교하면 고유성이 낮을 수 있으나,일반적으로는 충분히 고유한 식별자를 생성할 수 있다.

따라서, UUID는 고유성이 매우 중요한 대규모 분산 시스템이나 데이터베이스에서 사용되는 것이 일반적이고, ShortID는 더 짧은 길이의 식별자가 필요한 간단한 애플리케이션에서 주로 사용된다고 한다!

이번 프로젝트에서는 데이터베이스 없이 진행하여 리셋되지 않는 고유값을 줘야하기 때문에 ShortID를 사용했지만, 이후에 알게되었으니 필요에 따라 사용해보도록 해야겠다.

---

redux dev tools 설정하기

1. 크롬 확장자 다운
2. 설치
3. import

yarn add redux-devtools-extension

import { composeWithDevTools } from "redux-devtools-extension";

---