5월 13일 프리온보딩 11일차

오늘 한 일

오늘은 과제를 끝내지 못했기 때문에 개발을 계속했지만, 쉬는 날이기 때문에 조금 여유롭게 진행했다.
물론 내일까지는 개발을 다 해야한다는 생각에 계속 앉아 있기는 했지만...

공부한 것

recoil

redux보다 빠르게 개발해서 사용하기 쉬운 recoil을 이용해 전역 관리를 했다.
먼저 states 폴더를 만들고 거기에 관리하고 싶은 종류의 파일을 만든다.
그리고 관리하려는 변수를 key와 default를 등록해서 export로 초기화 한다.

예시 코드)
export const modalContentState = atom<ISearchItem>({
  key: '#modalContentState',
  default: {
    Title: '',
    Year: '',
    imdbID: '',
    Type: '',
    Poster: '',
    isBookmark: false,
  },
})

사용하고 싶은 파일에서 useRecoilState의 매개 변수에 states 폴더에서 만든 state를 넣어서 사용한다.

예시 코드)
const [content, setContent] = useRecoil(modalContentState)

localStorage 대신 store-js

localStorage를 사용할 때는 JSON.머시기를 이용해서 가공해야 하는데 store 라이브러리를 사용하면 그럴 필요가 없어서 사용했다.
https://www.npmjs.com/package/store 에서 사용법과 다운법을 알 수 있다.
그런데 다운 후 사용하려고 하니까 안되길래 알고보니 typescript에서는 @types/store도 추가로 다운받아야 사용할 수 있었다.

사용하는 것은 기본 localStorage와 거의 비슷하다. 정보를 가져오고 싶으면 get, 등록하고 싶으면 set으로 사용하면 된다.
참고로 배열을 추가로 등록하려면 기존 배열에 더해야하기 때문에 조금 귀찮다.

예시 코드)
const bookmarkMovies: ISearchItem[] = store.get('bookmark')
bookmarkMovies ? store.set('bookmark', [...bookmarkMovies, content])