즐겁게, 코드

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

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

리액트 어플리케이션에서는 상태와 속성을 통해 컴포넌트끼리 값을 주고받는다는 것을 알고 계실 것입니다. 그런데 컴포넌트 계층이 아래 이미지와 같다고 할 때, App에서 TodoItem까지 값을 전달해야 한다면 어떨까요? 맞습니다. App에서 TodoItem 컴포넌트까지 값을 전달하기 위해 TodoContainer, TodoList 컴포넌트에도 상태를 넘겨줘야 합니다. 물론 전달할 상태값이 단순하고 컴포넌트의 중첩 깊이가 깊지 않다면 이렇게 해도 큰 문제는 없습니다. 다만 큰 문제가 없을 뿐이지 분명히 더 나은 방법이 있는데요, 바로 오늘 소개할 리덕스를 활용하는 방법입니다. 🛠 리덕스(Redux) 리덕스는 데이터를 저장하는 거대한 창고(Store)와, 창고에 진입할 수 있는 함수들을 제공하는 라이브러리입니..