앞서 Context API에 대한 글을 몇개 작성했다. 하지만 결국 Context API를 언제 사용해야 하는지 이런 부분에 대해서는 결론에 도달하지 못했다. Redux vs Context 는 정말 많은 이야기가 있지만 정작 어떤 경우에 어떤 것을 사용해야 좋을지 모른 상태에서 그저 " 사용 " 하고 있었다. 이번에는 근복적인 내용으로 Context와 Redux가 무엇이고 어떻게 사용해야하고, 어떻게 다른지, 언제 사용해야하는지 결론을 정리하려고 한다. React Context란? 일반적인 React 애플리케이션의 데이터는 위에서 아래로 Props를 통해서 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 경우 번거로울 수 있다. context를 사용하면 트리 단계마다 명시적으로 props를..

웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. Derived State ? 파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 즉, 상태를 최소화 한다는 것이다. 계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 동기화 하는 방식으로 관리한다. 실제 예 각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 이러한 노래는 장르별로 그룹화가 되어있다. 그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 이것을 만들기 위해서 가장 첫번째..

들어가며 이번에는 Todo 리스트 애플리케이션을 만드려고 한다. 만들 기능으로는 ▶ Todo 아이템 추가 ▶ Todo 아이템 수정 ▶ Todo 아이템 삭제 ▶ Todo 아이템 필터링 ▶ 통계 표시 Todo를 만들면서 Recoil의 atoms와 selectors, atom families와 Hook 그리고 최적화를 다루게 될 것이다. Atoms TodoList 컴포넌트 import { atom, useRecoilValue } from "recoil"; export const todoListState = atom({ key: "todoListState", default: [], }); const TodoList = () => { const todoList = useRecoilValue(todoListStat..

들어가며 앞서 시작하기를 통해서 Recoil에 대해서 알아봤다. 이번에는 실제 React에서 어떤 방식으로 Recoil을 사용하는지 알아보려고 한다. 환경 세팅 npx create-react-app recoil 먼저 React 프로젝트가 필요하기 때문에 간단하게 CRA를 사용해서 환경을 만들었다. yarn add recoil 당연히 recoil 패키지가 필요하기 때문에 최신 버전을 설치했다. RecoilRoot // App.jsx import { RecoilRoot } from "recoil"; function App() { return ( Recoil Study ); } export default App; Redux에서 Provider를 사용해서 Redux를 사용할 컴포넌트를 나타냈는데, Recoil도..

들어가며 요즘 Recoil이라는 친구가 핫하길래 이번에 공부를 하려고 한다. 먼저 공식 사이트에서 Recoil에 대해서 알아보고 시작하기를 통해서 환경을 세팅해볼 계획이다. Why Recoil ? 전역 상태 관리에서 가장 유명한 라이브러리는 Redux일 것이다. 그런데 왜 Recoil을 요즘 이곳 저곳에서 도입하려고 할까? 그러려면 Redux를 사용했을 때의 단점을 한번 생각해봐야 할 것이다. 1. 거대하다! Redux으로 상태 관리를 하려고 할 때 작성자가 느끼는 가장 큰 부담감은 너무 크다는 것이다. 상태를 관리하기 위해서 Store를 만들고, 그거에 맞춰서 Action, Reducer , .... 사용하기 위해서 준비해야하는 것이 많다고 느껴진다. 2. 어렵다! 사실 위 " 거대하다! " 와 이어지..

상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..