[Mudig] 리팩토링 중 마주친 Recoil Hook 무엇이 좋을까?

이 코드는 유저의 정보를 불러오고 갱신하기 위한 코드이다. 

const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);

 

하지만 내가 보고있는 코드는 회원가입 유저의 데이터를 저장하는 페이지였다. 그래서 고민이 되었던 것은 유저의 정보를 저장한 것이 없는 신규 유저라면 불러올 정보가 없이 그냥 저장만 하면 되지 않을까 였다. 그리고 그렇게 떠올린 생각을 어떻게 코드에 적용시킬지 고민해보았다.

 

---

 

useRecoilState, useRecoilValue, 그리고 useSetRecoilState는 Recoil 상태 관리 라이브러리에서 React 컴포넌트 내에서 상태를 사용하기 위한 훅(hooks)이고 이 페이지에서는 그 3가지를 다 사용하고 있었다. 그래서 이들 각각의 사용법과 적절한 사용에 대해 정리해 보았다.

 

useRecoilState

useRecoilState는 React의 useState 훅과 유사하게 작동한다. 상태(atom 또는 selector)의 현재 값을 읽고, 이 값을 업데이트할 수 있는 함수를 제공한다. 이 훅을 사용할 때는 상태 값을 읽고 쓰는 작업이 모두 필요할 때 적합하다.

const [value, setValue] = useRecoilState(myAtom);

 

여기서 value는 myAtom의 현재 상태 값이고, setValue는 이 값을 업데이트하는 함수이다.

 

useRecoilValue

useRecoilValue는 상태의 현재 값을 읽기 위한 훅으로 상태를 업데이트하는 함수를 제공하지 않고, 오직 상태 값을 읽을 때만 사용한다. 상태를 읽기만 하고, 상태를 업데이트할 필요가 없을 때 사용하는 것이 좋다.

const value = useRecoilValue(myAtom);

 

이 경우 value는 myAtom의 현재 상태 값이고 상태 값을 업데이트하기 위한 함수는 제공되지 않는다.

 

useSetRecoilState

useSetRecoilState는 상태를 업데이트하기 위한 함수만을 제공하는 훅이다. 상태의 현재 값을 읽을 수는 없고, 상태를 업데이트할 때만 사용된다. 상태 값을 직접적으로 읽지 않고, 오직 업데이트만 필요한 경우에 이 훅을 사용하면 컴포넌트의 리렌더링을 줄일 수 있어 성능 최적화에 도움이 된다.

const setValue = useSetRecoilState(myAtom);

 

여기서 setValue는 myAtom 상태를 업데이트하는 함수이고, 상태의 현재 값을 제공하지 않는다.

 

적절한 사용 시기를 정리하자면 다음과 같다.

• 상태를 읽고 쓰는 작업이 모두 필요한 경우: useRecoilState
• 상태를 오직 읽기만 하는 경우: useRecoilValue
• 상태를 업데이트하는 작업만 필요한 경우: useSetRecoilState

---

 

그래서 해당 코드를 다음과 같이 수정하는것을 제안했다.

const setUserInfo = useSetRecoilState(userInfoAtom);

 

이렇게 하면 리렌더링을 줄일 수 있어서 성능 최적화에 도움이 되고 리팩토링의 의미에 맞는 코드 수정이라고 생각했다.