Recoil 에서 다른 페이지에서 Recoil Atom 값을 잘 불러들이지 못하는 경우

갑자기 Recoil 관련 컨텐츠를 올리게 되었네요.

Recoil은, 상태 관리 library입니다.

React를 사용하는데 있어서, Global State Management tool로 보통 대표적으로 Redux를 많이 씁니다.

 

하지만 Redux의 단점은, boilerplate 코드가 너무 많다는 점입니다.

Reducer, Store, Action 등등, 알아야 하는 코드가 많고, 직관적이지 않다는 단점이 있습니다.

단, 여러 사람들이 같이 작업하는 경우 정형화하기 쉽다는 장점이 있습니다.

 

하지만 Recoil의 경우에는 간단하게 Atom이라는 단위만 가지고도 충분히 global State를 잘 구현할 수 있습니다.

하지만 Atom을 이용해서 global State를 구현했음에도 다른 페이지로 redirect된 이후 Atom을 구현하지 못하는 경우도 많이 보았습니다.

 

왜 안되는지 몰라서.. 한참을 헤매다가, 

결국 page redirect를 하는데 있어서

 

<a href="/index">인덱스</a>

이렇게 redirect 되는게 있어서

import Button from 'Semantic-ui'
import Link from 'react-router-dom'

<Button as={Link} to={'/index'}>뒤로가기</Button>

이렇게 바꿔주니깐 되는걸 확인하였습니다.

 

단, Semantic ui 를 사용하였기 때문에 Semantic-ui 를 사용하지 않는 경우에는 Button을 사용하지 않아야 하는거 주의해주세요!

아마 href를 사용할 때 history를 날려주는것 때문에 이렇게 된다고 보시면 될것 같습니다.