React Recoil Atom으로 팝업 관리하기

 

Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다.

https://recoiljs.org/docs/basic-tutorial/atoms/

 

Atoms | Recoil

 

단순하게, Recoil은 상태를 관리하는 라이브러이며,

Atom은 상태단위 RecoilState입니다.

 

간단하게 사용법을 알아보자면, 사용방법은 아주 쉽습니다.

key, default 설정만 하면 끝입니다.

const todoListState = atom({
  key: 'TodoList',
  default: [],
});
...
// useState hook과 같이 사용
const [todoList, setTodoList] = useRecoilState(todoListState)

 

 

---

실제로 이전에 구현된 팝업에 Recoil Atom을 적용해보겠습니다.

https://innovatorwhy.tistory.com/32

React 팝업 생성하기

 

기존 Code에서는 부모 Component에서 자식 Component에 props를 전달하여,

자식 Component를 호출해야합니다.

따라서, 항상 해당 Component를 사용할때 onClose함수를 전달하거나, 또 다른 props를 전달해야 하는 코드를 작성해야 합니다.

 

하지만 Recoil로 구현하면 훨씬 간결합니다.

Props가 Reoil로 관리되면서 부모와 자식 Component 간의 props가 사라지게 됩니다.

 

 

자식 component

export const isShowState = atom({
  key: 'PopupTodo/show',
  default: false,
});
 
export default function PopupTodo() {
//const [isShow, setShow] = useState(true);  // AS-IS
  const [isShow, setShow] = useRecoilState(isShowState); // RecoiltState get,set hook
   ...

 

부모 Component

const [isShowPopup, setShowPopup] = useRecoilState(isShowState);
return (
       ...
       {isShowPopup && <PopupTodo />} {/*Prop를 전달하지 않습니다. */}
)

 

공통 컴포넌트나 팝업등 여러 Component에서 사용하는 Component의 상태를 Recoil로 관리한다면, 해당 Props를 쉽게 관리할수 있습니다.