리코일 사용 계기
이전에 프로젝트를 시작하기 전에 상태관리에 관한 개념이 없었다.
그래서 MobX에 대한 개념을 공부한 적이 있지만, 더 간편하고 많이 쓰이기 시작한다는 Recoil을 사용하기로 했었다.
그동안 초기셋팅은 해두었지만 마음이 급해 그냥 state를 쓰다가 이번 문제를 해결하기 위해 Recoil을 사용해 보았다.
공식문서를 보고 구글링하며 처음 접근하는 것은 어려웠는데 직접 사용해보니 정말 간편했다.
문제 상황
<QuizControl>(부모)컴포넌트 내에 <BeforeQuiz>, <CurrentQuiz> (자식들) 컴포넌트가 있다.
<BeforeQuiz>에서 nextStep이라는 state를 사용하여
입장허용 -> 보상확인 -> 퀴즈시작 -> 보상확인 -> 퀴즈시작 ... (입장허용은 처음에만 나와야 함) 이렇게 구현이 되도록 하였는데, <CurrentQuiz>와 연결해보니
입장허용 -> 보상확인 -> 퀴즈시작-> 정답확인-> 다음문제 -> 입장허용 -> 보상확인 -> 퀴즈시작-> 정답확인-> 다음문제 -> ... 이렇게 입장허용이 반복적으로 나왔다.
컴포넌트가 re-rendering 되면서 nextStep가 초기화되어 '입장허용'이 나오면 안되는데 나오는 것 같았다.
그래서 Recoil 상태관리를 써보기로 하였다.
해결 목표
- recoil을 사용하여 상태를 만든다.
<BeforeQuiz>,<CurrentQuiz>에 상태를 연결한다
- (
<CurrentQuiz>에도nextStepstate를 넣어서 마지막에 state 값을 1로 설정해 줘야지! 라는 목표를 가지고 있었지만. 해결하고 보니 이렇게도 안해줘도 되었다. 상태관리의 편리함을 느낌)
해결 방법
일단 <BeforeQuiz> 컴포넌트 에서 코드를 작성한 후 실행해 보았는데 <CurrentQuiz>에서 상채를 이어서 작성해주지 않아도 입장허용 -> 보상확인 -> 퀴즈시작 -> 보상확인 -> 퀴즈시작 -> 보상확인 -> 퀴즈시작 ... 이렇게 원하는 대로 실행이 되었다.
생각해보니 상태를 따로 관리해 주니까 re-rendering이 되어도 staterk 초기화 되지 않고 유지가 된 것이다.
배운 점
작은 부분의 상태만 적용해 보았지만 처음으로 사용해 보면서 상태관리의 편리함을 직접 알 수 있었다.
또 Recoil에는 내가 사용한 useRecoilState 뿐만 아니라
useRecoilValue, useSetRecoilState, useRecoilState, useResetRecoilState 등 다양한 Hooks가 있는데 앞으로 Recoil을 사용하면서 다양한 훅들에 익숙해 질 것이다.
