메인 프로젝트: recoil

이제까지 redux는 전역 상태 관리의 표준이라고 할 정도로 위세를 가지고 있었다. 실제로 다른 강의나 코드 스테이츠 같은 부트캠프도 redux를 우선적으로 가르친다. 그러나 redux는 사용하기 불편하다는 단점이 있었고, 이를 보완하기 위해 redux toolkit 같은 라이브러리를 주로 사용하지만, 그래도 불편하기는 마찬가지였다. 특히, 단순히 할당된 데이터를 다른 데이터로 바꾸려면, 일일이 액션을 만들어야 된다는 것도 편의성을 떨어뜨렸다. 이에 대항에 나온 전역 상태관리 라이브러리가 recoil이다. 

 

Recoil

---

recoil을 간단히 정의하면 전역적으로 사용하는 usestate라고 할 수 있다. 이것은 초기값만 미리 설정하고, 데이터를 조회하거나 변경할 때 모두 usestate처럼 사용한다. 예를 들어, 상태의 바꾸고 싶다면 우선 set함수를 useSetRecoilState로 선언한다.

  const setIsLoggedIn = useSetRecoilState(userStateWithExpiry);

그 다음은 set함수처럼 변경할 값을 넣으면 값이 변경된다. 

 

보시다시피 redux에 비해 전역 상태의 추가와 변경이 자유롭기에 많은 기업들이 recoil을 쓰기 시작하고 있다. 다만 단점이 없는 것도 아닌데, 변경이 자유로운 만큼 여러 컴포넌트에서 동시에 사용된다면 변경 상태를 예측할 수가 없다. 때문에 redux를 쓰는 것이 안정성 측면에서는 더 좋다. 따라서 recoil을 잘 사용하려면은 코드 구조를 만들 때 동시에 변경되는 상황을 피해서 만들어야 한다.

 

 

trouble shooting

---

이번에 난 recoil을 사용해서 카테고리를 만들려고 하였다. 일단 초기 구상은 다음과 같았다. 

product와 talent라는 2개의 타입으로 나누어진 페이지가 있었고, 각각 7개의 카테고리가 존재한다. 두 페이지 모두 구성과 사용하는 컴포넌트는 동일했고, 오직 카테고리와 타입에서만 차이가 존재하였다. 이때 두 페이지를 구성하는 shellList컴포넌트를 외부로 빼내고, 두 페이지에서는 오직 타입만 props로 타입을 전달하며 shellList 컴포넌트만 호출하게 만들었다.   

 

컴포넌트 구조도

 이때 단순히 props로 내려주면 props drilling이 발생하여 product와 talent에 recoil을 사용해 초기값을 선언하고, 하위 컴포넌트에서 불러와 사용하도록 만들었다.

 

여기까지는 완벽한 구상이라고 생각했지만 막상 구현하니까 문제가 발생했다.

 

우선 product와 talent의 타입을 지정하는 recoil상태에는 초기값으로 0을 주었다.

 

export const shellType = atom({
  key: 'shellType',
  default: '',
});

이유는 product와 talent 둘 중 어떤 값이 들어올지 모르기에, 공란으로 비워두었다. 그리고 product와 talent컴포넌트에서 useEffect를 사용해서 각각의 타입으로 변경하였다.

  const setShellPage = useSetRecoilState(shellType);
  
  useEffect(()=>{
  setShellPage("product");
  },[])

이러면 초기에 내가 변경한 상태가 하위 컴포넌트에서 불러올 거라고 생각했다. 여기서 나는 착각을 했다. 나는 당연히 상위 컴포넌트의 useEffect가 실행되고 하위 컴포넌트들이 실행될 줄 알았지만, 하위 컴포넌트의 렌더링이 끝난 이후에 useEffect가 실행되는 것이다. 당연히 에러가 발생했고, 나는 콘솔창에 초기값이 ""인 상황을 이해할 수가 없어서 몇 시간 동안 머리를 싸매었다.

 

결국 포기하고 그냥 props로 직접 product와 talent의 타입을 내려주는 것으로 코드를 바꾸었고, 후에 멘토분의 조언으로 원인을 파악할 수 있었다.

 

 

사용후기

---

프로젝트 초기만 해도 난 recoil이 활발히 사용될 줄 알았다. 그러나 막상 사용하니, 로그인 상태에서만 거의 사용되어서 atom이 3개 정도밖에 없었다. 그러나 난 선배들의 프로젝트에서 atom이 수십개가 있는 프로젝트를 봤기에 내가 잘못하고 있나?라고 생각했다. 이를 멘토 분께 물어보니, 실제 현업에서도 redux나 recoil 같은 전역 상태 코드를 그리 사용하지 않는다고 했다. 주된 이유로는 가독성으로, 전역상태를 사용하면 코드 가독성이 좋지 않아 리뷰가 쉽지 않고 구조도 파악하기 어렵다고 했다. 그래서 로그인이나 장바구니 같이 꼭 필요한 경우가 아닌 이상은 그냥 상태를 해당 컴포넌트에서만 사용하거나 props로 내린다고 했다.

 

물론 이 말이 꼭 정답은 아닐 것이다. 실제로도 많이 사용되는 라이브러리이기에 분야별로 그저 사용빈도가 달라서 그럴 수 도 있다. 그러나 남들이 사용한다고 꼭 사용해야 된다는 것이 아니라 상황에 맞춰서 라이브러리를 사용하는게 중요하다는 교훈을 얻을 수 있었다.