JS' 공부흔적

이번 글에서는 리코일의 selector에 대해 알아보도록 하겠다. selector selector는 리코일에서 관리하는 상태의 특정 부분만 선택할 때 사용한다. selector를 사용하는 이유는 최소한의 상태 집합만 atoms에 저장하고, 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지하기 위함이다. 아래에 나올 코드에 대해 미리 말하자면, TempFahrenheit만을 atom에 저장하고, 이로부터 파생되는 tempCelcius는 굳이 보존하지 않기 위해 selector를 사용했다. selector는 key와 get 함수를 필수로 받아야한다. 또한 set 함수도 선택적으로 받을 수 있는데, get 함수만 사용하게 되면 selecto..

저번 글에 이어 리코일의 또 다른 개념에 대해 알아보도록 하겠다. [Recoil] 리코일의 기본 개념 (1) - RecoilRoot, atom, useRecoilState 리코일은 리액트를 위한 상태관리 라이브러리이다. CMC 11기 활동을 하며 리코일을 처음 도입해봤는데 기본 개념에 대해 기술하고자 한다. RecoilRoot 리코일의 모든 요소는 아래와 같이 RecoilRoot 내 2junsu.tistory.com 저번 글에서는 상태를 불러오고 변경하기 위해 useRecoilState를 사용했다. 이번에는 상태를 불러오기만을 위한 개념, 상태를 변경하기만을 위한 개념에 대해 알아보도록 하겠다. useRecoilValue useRecoilValue는 컴포넌트에서 업데이트 함수는 필요 없고 상태 값만 필요..

리코일은 리액트를 위한 상태관리 라이브러리이다. CMC 11기 활동을 하며 리코일을 처음 도입해봤는데 기본 개념에 대해 기술하고자 한다. RecoilRoot 리코일의 모든 요소는 아래와 같이 RecoilRoot 내에서 써야한다. Test 컴포넌트 내에 recoil을 사용할 것이다. //App.jsx import React from "react"; import Test from "./Test"; import { RecoilRoot } from "recoil"; const App = () => { return ( ); }; export default App; atom 리코일은 기본적으로 atom을 사용하여 상태를 정의한다. 리덕스의 initialState와 비슷한 개념이라고 생각하면 된다. atom을 만들 ..

이전 글에 이어서 이번에는 createReducer에 대해 작성하겠다. 이전 글에서 다뤘던 createAction은 Redux의 action을 간편하게 만들 수 있는 것이었다면, createReducer도 마찬가지로 reducer를 간편하게 만들 수 있는 방법이다. createReducer TodoList 코드를 기준으로 보면 기존의 reducer를 생성하는 방법은 아래와 같다. const reducer = (state = [], action) => { switch (action.type) { case addTodo.type: return [...state, { text: action.payload, id: Date.now() }] case deleteTodo.type: return state.filte..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. Redux에 대해 잘 모른다면 아래 글을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자... 2junsu.tistory.com 또한 이전 글에서 다뤘던 TodoList 코드를 가지고 진행되니 React Redux (1), (2) 먼저 보고 오길 바란다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에..

이 글은 아래 글의 후속편이니 아래 글부터 보고 오는 것을 추천한다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이 2junsu.tistory.com 이제 추가 기능을 구현했으니 삭제 기능을 구현해보자. 삭제 기능에서 해야할 것은 특정 할 일에 붙어있는 삭제 버튼을 누르면 해당 할 일을 삭제하는 것이다. 따라서 특정 할 일에 대한 id가 필요하다. 그 후 할 일들이 저장된 배열을 돌면서 해당 id를 가지는 할 일을 제외한 나머지를 새로운 배열에 넣은 후..

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자.. 2junsu.tistory.com 할 일을 추가하고 삭제할 수 있는 간단한 Todo List를 구현하면서 React에서 Redux를 사용하는 법을 알아보자. 이 글에서는 '추가' 기능을 구현한다. 또한 Redux에 익숙해지기 위한 글이므로 Local Storage는 사용..

Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자. npm install redux yarn add redux 1. Store Store는 state가 저장되는 공간이다. state는 변경되는 데이터를 말한다. 버튼을 누르면 숫자가 1 증가하거나 감소하는 프로그램이 있다고 할 때, 여기에서의 state는 변경되는 숫자이다. 이러한 state들을 저장하는 곳이 store이다. store는 아래와 같이 생성한다. import { createStore } from 'redux' const store =..