즐겁게, 코드

지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..

오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다. 리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다. 실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다. Context API와의 차이 컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다. 다만 컨텍스트는 중첩 가능한 Provider 컴포넌트와 useContext() 훅을 활용해 provider - consumer 관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다. 한번 인증 정보, ..

페이스북에서 제작한 전역 상태 관리 라이브러리, recoil.js가 점점 많이 언급되는 것 같아 공식 문서를 살짝 따라가봤습니다. https://recoiljs.org/ko/ A state management library for React. recoiljs.org 따라가다 보니... 헨젤과 그레텔이 과자에 홀린 것처럼 계속 읽게 되었네요. 결론부터 말씀드리면 리코일은 리덕스를 대체할 수 있는 가뭄의 단비같은 라이브러리입니다. 그동안 리액트로 프로젝트를 진행하려 하면 솔직히 리덕스 로직을 작성하기 시작하는게 부담이 되어 컨텍스트 API를 사용하려 하곤 했는데요, 리코일을 사용하면 전역 상태 관리에 대한 부담을 덜 수 있을 것 같다는 희망을 볼 수 있었습니다! 리코일로 간단히 투두앱을 만들어본 후, 리덕스..