Recoil

이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..

최근에 웹 프론트엔드 개발자로 취업을 준비하는 개발자 지망생 분들을 멘토링을 하면서 여러가지 질문들을 받는데, 그 중에서 나도 고민을 하고 답변을 해준 질문들이 있었던 것 같아 그러한 질문들도 조금씩 블로그에서 다루어 보려고 한다. 이번 주제는 리액트에서의 상태관리를 어떤 방식으로 하는 것이 소위 best practice인가에 대한 질문을 받았고 이에 대한 내 생각을 정리해 보려고 한다. 어디까지나 이 글이 정답은 절.대. 아니며 자유로운 의견은 댓글로 남겨주면 감사할 것 같다. 질문 : 리액트에서 상태관리는 어떻게 해야 하나요? 상태관리 라이브러리는 꼭 써야 하나요? 쓰게 된다면 어떤 것을 써야 하나요? 이 이야기를 하려면 먼저 Flux 패턴에 대해서 이야기를 할 수 밖에 없을 것 같다. Flux 패턴..

리액트의 상태관리 라이브러리인 리코일(recoil.js)에 대해서 공식 문서를 정리한 내용을 포스팅 해 보려고 한다. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다. 기존에 전역 상태를 관리할 수 있는 훌륭한 여러가지 방법들이 있는데 왜 페이스북은 새로운 라이브러리를 만들게 된 것일까? 기존의 리액트 상태관리 라이브러리는 Store 라는 곳에 상태를 저장한다. 여기서 Store는 외부 요인이기 때문에 리액트의 내부 스케줄러에 접근할 수가 없게 된다. 그리고 리액트에서도 동시성 모드(concurrent mode)가 등장하면서 리액트와 동시성 모드를 사용할 수 있는 방법을 고민하게 되었다. 덧붙여서, 리덕스와 같은..