Recoil은 신이다.

도입 배경

프로젝트에서 채팅 게임을 만들고 있다. 구현 사항은 다음과 같다.

1. 매칭 소켓 입장
2. 매칭 후 새로운 방으로 이동하여 소켓 채팅 시작

3. 턴제 채팅
4. 각 턴에 제한시간 존재
5. 음성 인식과 타이핑 기능 혼용 가능

 

우선 핵심 기능인 1, 2, 5번을 구현했고, 여기 까진 Prop Drilling도 문제가 되지 않았다.
하지만 3, 4번 기능과 더불어 게임적인 요소를 구현하기 시작하자 초기 설계보다 많은 상태가 필요해졌다.

Prop Drilling을 컨트롤 할 수 없는 수준은 아니었지만,
현재의 생산성과 유지보수성 어느쪽을 고려해도 상태관리 라이브러리를 도입하는 게 이득이라 생각했다.

그래서 상태관리 라이브러리를 도입하고자 했는데
1. 간단한 전역 상태관리만 하면 되므로 Redux는 과하게 느껴졌다.

2. Context Api는 Context 값이 변경될 때 useContext가 렌더링을 유도하여 성능 문제가 발생할 수 있다는 걸 알게 되어 다른 라이브러리를 써보고자 했다.
3. 그래서 최근 면접에서 추천받은 Recoil을 찾아보았다. 면접은 떨어졌지만 Recoil을 얻었다.

 

장점

가장 큰 장점은 전역 상태관리의 간단함이었다.

처음 공식문서를 살펴보고 이렇게 간단해도 되나 싶었다.

store에 useState를 선언한 후 사용할 컴포넌트에서 useState처럼 쓰면 된다!

단점

너무 간단하므로,, 남발하게 되면 전역 상태를 어느 컴포넌트에서 변경하는지 알기 어려울 것 같았다.

이는 추후 유지보수성을 저해할 수 있다.

그리고 아쉽게도 이런 부분을 도와주는 개발자 도구는 없는 것 같았다.

 

이 단점을 보완하고자 간단한 구조를 설계하고 코드를 작성했다.
1. 비즈니스 로직을 처리하는 컴포넌트를 기능별로 정하고 해당 컴포넌트에서만 상태를 변경한다.

2. 그외 컴포넌트에선 useRecoilValue만 사용한다. => UI만 구현하는 컴포넌트

이 글을 쓰며 recoil에 더 알아보니 요기요에선 Container/Presentational 패턴과 React의 custom hooks를 조합하여 단점을 보완했다고 한다.
요기요

Recoil을 이용한 손쉬운 상태관리

 

결론

recoil은 진짜 편하다