[TIL] 원티드 프리온보딩_8일차_220510

📌 Recoil 사용하여 상태 관리하기

Recoil은 React를 위한 상태 관리 라이브러리다.
(Vue.js를 공부했던 나였기에 😎 Vuex와 같은 거라고 쉽게 생각할 수 있었다!)

---

1. 설치하기
   npm install recoil 또는 yarn add recoil
2. RocoliRoot
   사용할 부모 트리 어딘가에 RecoilRoot 로 감싸준다.

   <React.StrictMode>
     <RecoilRoot>
       <Routes />
     </RecoilRoot>
   </React.StrictMode>

   3.Atom
   Atom은 state의 일부를 나타낸다. 아래와 같이 작성 후 상태관리를 해준다.

• key는 unique 한 ID값
• default는 initial value

    // src/states/movie.tsx
    
    import { atom } from 'recoil'
    
    export const MovieSearch = atom({
      key: '#movieSearchValue',
      default: ''
    })
    	

4. 해당 state를 컴포넌트에 사용하기 위해 아래와 같이 작성한다.

	// routes/Movies/index.tsx
    
    const [searchValue, setSearchValue] = useRecoilState(MovieSearch)

• useRecoilState() : useState() 와 유사하다고 생각하면 된다. [state, setState] 튜플에 할당하며, 인자에 Atoms를 넣어주면 된다.

	const [test, setTest] = useRecoilState(MovieSearch) 

• useRecoilValue() : state값을 가져오기 위해 사용되며 선언한 변수에 할당하여 사용하면 된다.

	const test = useRecoliValue(MovieSearch)

• useSetRecoilState() : 선언된 함수변수에 할당하여 사용하면 된다.

	const setTest = useSetRecoilState(MovieSearch)

• useResetRecoilState() : state값을 default(초기값)으로 Reset 하기 위해 사용되며 선언한 함수에 할당하여 사용하면 된다.

	const testReset = useResetRecoliState(MovieSearch)

---

👀 useMount/useUnMount & setInterval 사용하기

Mount할 때 해당 코드를 실행한다고 치자.

useMount(() => {
	Test() // Api 요청을 보내는 메소드
})

이 메소드를 3초마다 업데이트하여 데이터를 변화시켜야 한다고 했을 때 setInterval을 이용하여 구현을 했다고 하자.

	useMount(() => {
    	setInterval(() => {
        	Test()
        },3000)
    })
    

이렇게만 완료를 하게되면 다른 페이지를 넘어갔을 때도 계속 메소드가 실행되고 있는 문제가 발생한다
그렇기에 꼭 해제를 시켜야한다.

	let interVal: NodeJS.Timeout
    
    useMount(() => {
    	interval = setInterval(() => {
        	Test()
        },3000)
    })
    
    useUnMount(() => {
    	clearInterval(interval)
    })