so woon!

학습일 : 2023. 04. 25 지금까지 get만 써봤는데, 이번에는 Selector의 set 기능에 대해 알아보겠다. set은 state를 set하는 것을 도와주는 속성이다. set함수는 원하는 state가 어떤 것이든지 그것으로 수정하게끔 해준다. set함수는 첫 번째 argument로 option이라는 object를 주는데, 그건 setRecoilState를 가지고 있다. 두번째 argument는 우리가 보내는 새로운 값을 주고 있다. array의 첫번째 요소는 get property로부터 return한 값일 것이다. const [hours, setHours] = useRecoilState(hourSelector); // hours : selector의 get함수의 값, setHours : set..

학습일 : 2023. 04. 25 https://www.npmjs.com/package/recoil-persist recoil-persist Package for recoil to persist and rehydrate store. Latest version: 4.2.0, last published: a year ago. Start using recoil-persist in your project by running `npm i recoil-persist`. There are 4 other projects in the npm registry using recoil-persist. www.npmjs.com 사용을 위해 install npm i recoil-persist import import { reco..

학습일 : 2023. 04. 21 저번 글까지는 새 toDo를 추가하면 가장 먼저 TODO 카테고리로 들어갔었다. 하지만 이렇게 말고 처음 TODO를 생성할때 카테고리를 선택해서 적어줄 수 있게 해보자. toDo의 카테고리가 categoryState에 따라서 추가되게 해보도록 하자. atoms.tsx 에 적어주었던 categoryState에 따라서 새 toDo의 카테고리가 정해졌으면 좋겠다. 카테고리를 얻어오도록 한다. 값만 얻고 싶기 때문에 useRecoilValue를 사용하고 categoryState atom을 불러온다. const category = useRecoilValue(categoryState); 작성 그리고 setToDos에서 category: category 를 작성한다. (단축 문법으로..

학습일 : 2023. 04. 20 저번글에서 했던 방식은 세개의 카테고리를 한번에 렌더링을 했었다. 그 방식 말고 한 번에 하나의 카테고리만 보여주고 싶기 때문에 새로운 state를 만들어 줄 것이다. 이 state의 역할은 사용자가 현재 선택한 카테고리를 저장할 것이다. select state를 만들어서, 원하는 카테고리의 toDo만 보이게 한번 해보자 그리고 그 state를 이용하면 지금 우리가 toDo를 입력하는 방식도 바꿀 수 있을 것이다. 지금은 toDo를 입력하면 TODO배열로 들어가게 된다. 그게 아닌 지금 내가 원하는 카테고리에 toDo를 등록할 수 있으면 좋겠다. 카테고리 state를 만들어보자. atom일 것이고 key로 category, 그리고 기본적으로 카테고리는 TODO 일 것이다..

학습일 : 2023. 04. 20 selector는 derived state를 나타낸다. derived state란, state를 입력 받아서 그걸 변형해 반환하는 순수함수를 거쳐 반환된 값을 말한다. selector를 사용하면 state 자체가 변하는 것은 아니고 output을 변형하는 것이다. selector가 있으면 데이터에 좀 더 체계화된 방식으로 접근할 수 있다. 한 곳에 데이터를 몰아넣고 컴포넌트 안에서 그것을 수정하는 대신 atom에 데이터를 모아두고 selector로 데이터를 변형할 수 있다. 우리는 지금 이 toDoState에 모든 todo들을 담고 있다. 카테고리와 상관없이, 모든 todo 들이 전부 같은 state에 저장되고 있다. DONE, DOING, TODO 든 뭐든 간에 전부 ..

학습일 : 2023. 04. 15 Recoil을 사용하지 않았던 개발환경에서는 단순한 작업일 경우 유용하게 쓸 수 있었지만 작업의 양이 많아질 경우 prop을 쭉 내려 보내서 사용하는 global state가 다소 비효율적이다. 예를 들어 로그인한 사용자의 경우 많은 컴포넌트에서 다른 모습을 보여주어야 한다고 가정했을 때, 이런 방식으로 그 많은 컴포넌트에 prop을 내려주어야 하는 너무 비효율적인 일이 발생할 것이다. 따라서 이러한 이유로 상태관리가 필요한 것인데, Recoil을 사용함으로 인해 전처럼 isDark를 부모가 자식에게 prop을 내려주는 계층 구조 대신 atom을 형성하고 그 안에 있는 value가 필요한 경우 접근할 수 있게 하는 원리이다. 필요로 하는 component가 직접 atom..