개요
데이터 저장 방식이 바뀌면서 데이터를 불러오는 방법도 바뀌었는데, 해당 과정을 수정하면서 데이터를 불러오는 과정도 다시 한번 훑어보게 되었다.
그런데 아니나 다를까 Style페이지와 clothes페이지에 필요한 데이터들을 공통된 상위 파일에서 useEffect를 사용해서 불러오는 방식을 사용하고 있었다. 기존에는 Redux나 Recoil같은 전역상태관리 라이브러리를 알기도 전이였기 때문에 공통된 파일에서 데이터를 모두 불러오고 Props로 넘겨줘야 한다는 생각에 그렇게 구조를 만들었다.
하지만 이렇게 된다면 style페이지나 clothes페이지 한군데에서 페이지 새로고침이 일어나면 다른 페이지의 필요없는 데이터도 새롭게 불러와야 하는 과정이 이뤄지는 거였다. 이런 과정이 지금에 와서 생각해보니 꽤나 비효율적인 방법이었고 Recoil을 사용해서 문제를 해결할 수 있다고 생각이 들어서 코드를 새롭게 구현해보기로 했다.
기존 코드
사진과 같이 clothesList와 styleList, userStyleTags state를 생성하고 하위 컴포넌트에 데이터를 전달하고 있었다.
문제 해결코드
1. DressRoom (옷에 대한 정보를 저장하는 페이지)
우선은 DressRoom이라는 페이지 컴포넌트에 Recoil을 사용하는 state를 생성해주었다.
이후에 useEffect를 사용해서 해당 페이지에서 필요한 데이터인 clothes에 대한 데이터만 불러와서 데이터를 저장해주었다.
결과적으로 해당 페이지에서 원하는 데이터만 출력이 가능해졌다.
2. StylePage
Style페이지의 경우에는 기존의 DressRoom에 저장한 옷들에 대한 정보와 스타일에 대한 데이터, 스타일들을 분류하는 태그에 대한 데이터가 모두 필요하다.
그렇기 때문에 기존의 clothesData는 불러오고 나머지 두개는 새롭게 데이터를 불러와야 하기 때문에 state를 생성해주었다.
이후에 페이지로 이동하면 태그와 style들에 대한 데이터를 가져오도록 하였다.
