RECOIL

개발

[개발] nextjs에서 모달 관리하기 (feat. recoil)

저번 포스팅에는 recoil을 설치하고, nextjs에서 세팅하는 방법과 기본적인 recoil의 사용법에 대해 포스팅을 진행했다. 해당 포스팅을 하면서 recoil을 통해 애플리케이션의 모달 상태를 전역으로 관리하는 방법에 대해서 포스팅을 진행할 것이라고 언급했는데, 이 포스팅에서 한 번 소개해보도록 하겠다. 현재 진행중인 프로젝트는, 로그인 유저와 비로그인 유저에 따라서 처리해야할 로직이 존재한다. 로그인 유저는 애플리케이션의 모든 기능에 접근이 가능하지만, 비로그인 유저에 한해서는 특정 기능에서, 로그인이 필요하다는 모달을 띄워줘야만 했다. recoil을 통해 모달의 상태를 전역관리 하기 이전에는, 각 페이지에서 작성한 모달 컴포넌트와 모달의 상태 함수인 setState 함수를 관련 컴포넌트에 pro..

개발 지식 정리

nextjs에서 recoil 세팅하기

프로젝트를 진행하면서, 프로젝트의 볼륨이 커질수록 관리해야 하는 상태가 많아지고, 컴포넌트 중첩 구조가 발생함에 따라 관련 state를 상위 컴포넌트에서 하위컴포넌트로 반복적으로 전달하게 되는 props drilling 문제가 발생했다. 따라서 코드 유지보수를 원활하게 관리하고, 상태관리를 간편하게 하기위해 상태관리 라이브러리를 도입하게 되었는데, 이전 프로젝트에서는 redux를 사용하여 상태관리를 진행했었지만, 보일러 플레이트가 적고 비교적 간단한 recoil을 도입하게 되었고, 해당 과정을 포스팅하려고 한다. 1. recoil 라이브러리 설치 일단 recoil 패키지를 설치한다. // npm npm install recoil // yarn yarn add recoil 2. recoil 세팅하기 rec..

Geonwoo
'RECOIL' 태그의 글 목록