반응형 Library & Framework48 [Zustand] 상태 값 초기화 하기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" How to reset state zustand에서는 상태값을 초기화시켜주는 내장 함수를 제공해주고 있을까? 찾아보니 따로 제공해주고 있는게 없어 별도로 정의해 사용해야만 한다. 그래도 공식문서에서 이러한 방식들이 있다고 안내해주고 있어 참고하여 만들어두면 좋다. 공식문서의 코드를 그대로 가져와보자. import { create } from 'zustand' // define types for state values and actions separately type State = { salmon: number tuna: number } type Actions = { addSalmon: (qty.. 2024. 4. 4. [Zustand] get()을 사용하여 최신값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" get은 도대체 언제 쓰는 걸까? 얼핏 zustand를 살펴보면 set/get을 제공해주고 있는데 get이라는 녀석을 언제 쓰라고 제공해 주는 건지 의아하다. Read from state in actions 혹시나 공식문서에 나와있나 살펴보면 Read from state in actions라는 세션으로 설명을 해주고 있다. const useSoundStore = create((set, get) => ({ sound: 'grunt', action: () => { const sound = get().sound ... 이러한 사용 방식은 store의 action 함수를 선언할 때 현재 store s.. 2024. 4. 3. [Zustand] Auto Generating Selectors 설정으로 더 간단하게 state값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Auto Generating Selectors 공식문서에서 제공하는 선택기 자동 생성 패턴이다. const count = useCountStore((state) => state.count) 보통 이런 식으로 state값을 가져오기는 하는데 state => state.count 이런 방식조차 너무 자주쓰면 귀찮긴 하다. 훌륭하게도 zustand쪽에서 자동으로 실렉터를 생성해 주는 방식을 제공해 주어 그대로 적용해 보자. store/index.ts import { StoreApi, UseBoundStore } from 'zustand' type WithSelectors = S extends { .. 2024. 4. 3. [Zustand] 스토어 값 한 번에 여러개 가져오기 (ft. useShallow) "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", 스토어 값 여러 개가 필요한 경우 이전 게시글 "[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법"에서 스토어 값을 가져올 때 이런 식으로 사용했었다. import { useCountStore } from '../store/countStore' const CountButton = () => { const increase = useCountStore((state) => state.increase) const decrease = useCountStore((state) => state.decrease) return ( 증가 감소 ) } 하지만 한 컴포넌트에서 하나의 스토어.. 2024. 4. 3. [Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Zustand란? zustand는 수많은 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적이며, 단순한 방식의 사용법을 제공하여 최근에 굉장히 각광받는 라이브러리이다. 개인적으로는 러닝커브가 높지 않다는 게 아주 큰 장점이 아닐까 싶다. Zustand 설치 및 적용 Zustand 설치 # NPM npm install zustand # Yarn yarn add zustand 여느 라이브러리와 같이 동일하게 추가를 해주고 별다른 설정은 필요 없다. Zustand 사용 아주 간단하게 설치를 마쳤으니 사용도 아주 손쉽게 해 보도록 하자. 공식문서에서도 아주 간단하게 설명이 되어있는데, 공.. 2024. 4. 1. [Lodash] 배열에서 false인 요소들 제거하기 (ft. compact) compact lodash에서 제공하고 있는 compact() 메서드의 경우 배열에서 false인 요소들을 제외할 때 사용되는 메서드이다. _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] 이런 식으로 배열 요소 중 자바스크립트에서 false로 간주되는 것들을 제거한 배열을 반환해 준다. 근데 이렇게만 보면 굳이 사용할 필요가 있나? 싶기도 하다. const array = [0, 1, false, 2, '', 3] array.filter(v => v) // => [1, 2, 3] 이렇게 filter만 사용해도 크게 복잡하지 않게 사용이 가능하기 때문이다. 실제로 나 같은 경우에는 특수한 경우가 아니면 filter 메서드를 사용하는 편이고, api 응답 데이터를 .. 2024. 1. 24. [Lodash] 객체에서 특정 프로퍼티만 뽑아서 사용하기 (ft. pick) pick lodash에서 제공하고 있는 pick() 메서드의 경우 객체에서 특정 프로퍼티만 사용하고자 할 때 사용된다. 일반적으로 어디서든 omit을 소개할때 같이 소개되는 메서드이기도 하며, omit과 마찬가지로 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. // _.pick(object, [paths]) const object = { 'a': 1, 'b': '2', 'c': 3 }; const result = _.pick(object, ['a', 'c']); console.log(result) // { 'a': 1, 'c': 3 } pickBy pickBy() 메서드는 특정 프로퍼티만 뽑아 사용하는것은 동일하나 특정 조건.. 2023. 6. 18. [Lodash] 객체에서 특정 프로퍼티 제외하기 (ft. omit) omit lodash에서 제공하고 있는 omit() 메서드의 경우 객체에서 특정 프로퍼티를 제외할 때 사용되는 메서드이다. omit이라는 명칭은 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. 특히 typescript의 유틸리티 타입에서도 흔하게 볼 수 있다. // _.omit(object, [paths: string|string[]]) const object = { 'a': 1, 'b': '2', 'c': 3 }; console.log(_.omit(object, ['a', 'c'])); //{ 'b': '2' } 특정 객체를 기준으로 제외하고 싶은 프로퍼티의 키 배열을 넣어두면 제외된 나머지 객체가 반환되는 형식이다. omi.. 2023. 6. 13. [Lodash] 배열 차집합(difference) 구하기 difference lodash에서 제공하고 있는 difference() 메서드의 경우 차집합의 개념과 마찬가지로 하나의 기준이 되는 배열이 있고 그 이후에 오는 배열로 이루어진 값들과 비교하여 중복되지 않는 값을 반환한다. // _.difference(array, [values]) const arr = [2, 1] console.log(_.difference(arr, [2, 3])) // [1] console.log(_.difference(arr, [2, 3], [1])) // [] console.log(_.difference(arr, [3, 4], [5])) // [2. 1] 새로운 배열을 반환하기 때문에 변수에 담아서 사용하도록 하자. 참고: https://lodash.com/docs/4.17.15.. 2023. 3. 13. 이전 1 2 3 4 ··· 6 다음 반응형
