Tech/상태관리

다양한 상태를 관리하며 더 효율적인 상태관리에 대하여 고민하게 되었다. 📌 상태(state)는 무엇인가? 상태는 변하는 데이터이다. 더 정확히 말하자면 리렌더링에 영향을 미치는 변하는 값이다. 리액트에서 페이지는 주로 props나 상태에 영향을 받아 컴포넌트가 변화할 때 리렌더링이 된다. 리렌더링이 유발되면 가상 dom에서 변경된 부분만 캐치하여 실제 dom에 반영되고 우리가 의도한대로 값을 변경하여 보여준다. 📌 상태 관리의 종류 상태는 지역상태와 전역상태로 나뉘고 그에 따른 관리 방법이 다르다. 지역 상태 ( local state ) 관리 한 컴포넌트 안에서 useState를 통하여 상태를 선언하고ㅁ 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨 전달하는 props drilling 방식의 상태관..

개요 영화 웹 서비스 프로젝트를 진행하던 중 각 슬라이더를 구독하는 개별적인 atom이 필요했다. 동일한 속성의 atom을 하나하나 생성하는 것이 비효율적이라고 생각했고, 다른 방법을 찾아보던 중 recoil에서 제공하는 atomFamily API를 알게 되었다. AtomFamily : 동일한 형태의 atom을 생성하는 팩토리 함수 리턴 atomfamily를 활용하면 특정 파라미터에 따른 독립적인 atom state를 생성할 수 있다. 이때 사용되는 특정 파라미터를 key라고 하겠다. 예를 들어 Todo 리스트의 개별적인 todo의 상태를 구독하는 atom을 만들고 싶다고 해보자. atomFamily는 다음과 같이 작성된다. 여기서 key 값은 id가 된다. const todoItemState = ato..