React useState 대신 recoil 로

React를 다루게 되는 상황이 오면서 useState의 상태 관리에 있어서 문제가 생겼다.

솔직히 아직 너무 미흡해서 useState에 상태 관리에 대해 이해도가 많이 적은건 사실이다.
react를 접근하면서 점점 코드량이 늘어나면서 상태 관리가 너무 많아지고 코드도 적지 않게 지저분해짐을 느꼈고, 때문에 리팩토링을 하면서 같이 프로젝트를 하는 다른 회사 동료(프론트) 의 논의를 통해 recoil 이라는 상태관리 라이브러리를 사용하게 되었다.

https://recoiljs.org/ko/
recoil에 대한 내용은 한글화 되어 있다. 참고 하시길...

recoil을 이해한바로 설명 하자면

초기에 상태관리가 필요한 모든 데이터를 state.js에 초기 값을 설정 해주어야 한다

//state.js
import { atom } from 'recoil';
export const valueState = atom({
  key : 'value', // 단순히 키값이지만 유니크한 값으로 설정해주어야 한다.
  default : 0 // boolean, [], {}, '' 등 설정 가능하다
})

//main.js
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { valueState } from './state.js';

const [ value, setValue ] = useRecoilState(valueState) // 현재 상태 값과 상태 값을 업데이트 하는 2가지를 모두 사용
const value = useRecoilValue(valueState) // 현재 상태값만 사용
const setValue = useSetRecoilState(valueState) // 상태 값 업데이트하는 set값만 사용

위에 예시 코드 처럼 하면 recoil을 사용을 할 수 있는데 처음 state.js에서 초기 값을 설정해주고
state.js에 설정한 상태 관리를 접근하고 싶다면 main.js 에서 import를 하고 접근을 한다 ( 구독이라고 한다. )
여기서 main.js 에서 구독 한것처럼 다른 .js 파일에서도 구독 하고 값을 변환하고 사용하는 것에 따라 모든 해당 value라는 상태 값을 import하고 있는 .js가 동시 다발적으로 바뀐다
해당 recoil을 사용하면서 state.js에서 모든 상태 값을 가지고 있어서 나름 클린(?)해진 느낌을 받았다