[모던 리액트 딥다이브] 5.2장 리액트 훅으로 시작하는 상태 관리

2024. 8. 11. 18:49· FE/리뷰

useState와 useReducer
  • useState 
    • 여러 컴포넌트에 걸쳐 손쉽게 동일한 인터페이스의 상태를 생성하고 관리할 수 잇게 됨
  • useReducer
    • useState는 useReducer로 구현이 된 훅임
  • 두 개의 훅 모두 만들기에 따라 재사용할 수 있는 지역 상태를 만들어 주지만 이는 지역 상태라는 한계 때문에 여러 컴포넌트에 걸쳐 공유하기 위해서는 컴포넌트 트리를 재설계 하는 등의 수고로움이 필요함

 

 

Recoil
  • 리액트를 만든 페이스북에서 만든 리액트를 위한 상태 관리 라이브러리
  • 최소 상태 개념인 Atom을 처음 리액트 생테계에서 선보임
  • 실제 프로덕션에 사용하기에는 안정성, 성능, 사용성을 보장할 수 없음
  • Recoil의 상태값은 RecoilRoot로 생성된 Context의 스토어에 저장됨
  • 스토어의 상태값에 접근할 수 있는 함수들이 있으며, 이 함수들을 활용해 상태값에 접근하거나 상태값을 변경할 수 있음
  • 값의 변경이 발생하면 이를 참조하고 있는 하위 컴포넌트에 모두 알림
  • Recoilroot
    • Recoil을 사용하기 위해 RecoilRoot를 애플리케이션의 최상단에 선언해 둬야 함
    • Recoilroot에서 Recoil에서 생성되는 상태값을 저장하기 위한 스토어를 생성함
  • atom
    • 상태를 나타내는 Recoil의 최소 상태 단위
    • key 값을 필수로 가지며 다른 atom과 구별하는 식별자가 되는 필수 값
  • useRecoilValue
    • atom의 값을 읽어오는 훅
  • useRecoilState
    • useState와 유사하게 값을 가져오고, 이 값을 변경할 수 있는 훅
  • 특징
    • 다양한 비동기 작업을 지원하는 API를 제공하기 때문에 redux-saga, redux-thunk 등 추가적인 미들웨어를 사용하지 않아도 됨

 

Jotai
  • Recoil의 atom 모델에 영감을 받아 만들어진 상태 관리 라이브러리
  • 상향식 접근법을 취함 => 작은 단위의 상태를 위로 전파할 수 있는 구조
  • Context의 문제점인 리렌더링 문제와, 추가적으로 메모이제이션이나 최적화를 거치지 않아도 리렌더링이 발생되지 않도록 설계됨
  • atom
    • 최소 단위의 상태
    • atom 하나만으로도 상태를 만들 수도, 이에 파생된 상태를 만들수도 있음
    • 별도의 key를 넘겨주지 안하오 됨
    • config라는 객체를 반환함
  • useAtomValue
    • recoil과 다르게 컴포넌트 루트 레벨에서 Context가 존재하지 않아도 됨
    • atom의 값은 atom이 가지고 있는 것이 아니라 store에 존재 함
    • store에 atom 객체 그 자체를 키로 활용해 값을 저장함 => WeakMap 방식
  • useAtom
    • useState와 동일한 형태의 배열을 반환함
    • atom의 현재 값을 나타내는 useAtomValue 훅의 결과를 반환하며, 두번째로는 useSetAtom 훅을 반환함
  • 특징
    • Recoil의 atom 개념을 도입하면서도 API가 간결함
    • 사용자가 키를 관리할 필요가 없음
    • selector없이 atom만으로 atom 값에서 또 다른 파생된 상태를 만들 수 있음
import {atom, useAtom, useAtomValue} from 'jotai'

const couterState = atom(0);

function Counter() {
    const [,setCount] = useAtom(counterState);

    function handleBtnClick() {
        setCount((count) => count+1);
    }

    return (
        <>
            <button onClick={handleBtnClick}>+</button>
        </>
    )
}

 

 

 

 

Zustand
  • 리덕스에 영감을 받아 만들어짐
  • 하나의 스토어에서 중앙 집중형으로 활용해 이 스토어 내부에서 상태를 관리하고 있음
  • createStore를 사용하면 리액트와 상관없는 바닐라 스토어를 만들 수 있음
  • 특징
    • 특별히 많은 코드를 작성하지 않아도 빠르게 스토어를 만들고 사용할 수 있음
    • 간단하고 빠르게 상태를 정의할 수 있음
    • 라이브러리도 굉장히 작음
    • 타입스크립트를 기반으로 작성돼 있음
    • 리덕스와 마찬가지로 미들웨어를 지원함
import { create } from "zustand";

const useCounterStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const [count, inc, dec] = useCounterStore();

  return (
    <>
      <span>{count}</span>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
}

 

 

'FE > 리뷰' 카테고리의 다른 글

[모던 리액트 딥다이브] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석  (0) 2024.08.17
[모던 리액트 딥다이브] 6장 리액트 개발 도구  (0) 2024.08.17
[모던 리액트 딥다이브] 5.1장 상태 관리  (0) 2024.08.11
[모던 리액트 딥다이브] 4.3장 Next.js  (1) 2024.08.04
[모던 리액트 딥다이브] 4.2장 SSR을 위한 리액트 API  (0) 2024.08.03
'FE/리뷰' 카테고리의 다른 글
  • [모던 리액트 딥다이브] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석
  • [모던 리액트 딥다이브] 6장 리액트 개발 도구
  • [모던 리액트 딥다이브] 5.1장 상태 관리
  • [모던 리액트 딥다이브] 4.3장 Next.js
따봉치치
따봉치치
따봉치치
김치치의개발블로그
따봉치치
전체
오늘
어제
  • 분류 전체보기 (359)
    • 면접질문 (4)
    • CS (50)
    • FE (116)
      • Javascipt (16)
      • Typescipt (6)
      • React (16)
      • CSS (5)
      • Nextjs (1)
      • 리뷰 (70)
    • Algorithm (181)
    • ETC (3)
      • Bootcamp (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • TOPCIT
  • 투 포인터
  • typescript
  • 백트래킹
  • 문자열
  • BFS
  • 완전탐색
  • 누적합
  • 모던 자바스크립트 딥다이브
  • 데이터베이스
  • 백준
  • 스택
  • 그래프 탐색
  • 모던 리액트 딥다이브
  • BOJ
  • Greedy
  • 그리디
  • Stack
  • C++
  • react
  • 우선순위 큐
  • CS
  • 알고리즘
  • 자료구조
  • 자바스크립트
  • dp
  • 탐욕 알고리즘
  • 리액트
  • javascript
  • Fe

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
따봉치치
[모던 리액트 딥다이브] 5.2장 리액트 훅으로 시작하는 상태 관리
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.