전역상태

React에서 상태관리 툴 zustand 사용하기

zustand는 flux 원리를 따르는 가볍고 뛰어난 성능을 보여주면서도 사용하기 쉬운 쉬운 상태관리 툴이다. 🥕 다양한 hooks을 지원하기 때문에, React에 익숙한 사용자라면 더욱 더 쉽게 접근할 수 있다. 🥕 기존의 Context API의 단점인 Provider 내부의 렌더링 최적화 문제를 해결하고, 심지어 zustand는 provider로 감싸주지 않아도 되는 장점을 지닌다. 🥕 기존의 redux보다 더 간편한 설정이 가능하며 recoil보다 활발하게 업데이트와 이슈 활동이 이루어지고 있기 때문에 앞으로가 더 기대되는 라이브러리이다. 간단한 사용법 위에서 말했듯, zustand는 별다른 설정없이 사용할 수 있다. create 함수를 통해서 상태와 상태를 변화시킬 함수를 작성한다. import ..

ContextAPI 사용하기

리액트의 코어 라이브러리로 ContextAPI는 redux, recoil, mobX와 같은 라이브러리와는 다르게 설치 없이 사용할 수 있다. 최상위 컴포넌트부터 최하위 컴포넌트까지 모두 동일한 상태를 만들고 사용하기 위해서 ContextAPI와 같은 전역 상태 관리 도구를 이용할 수 있다. // store.js import React, { useState } from "react"; export const MyContext = React.createContext(); const StateStore = (props) => { const [color, setColor] = useState("black"); const [direction, setDirection] = useState("row"); return..

상태관리 라이브러리 Redux

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..

간단한 Recoil 사용법

Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다. 🍈 따라서 React 환경에 좀 더 최적화 된 라이브러리라고 할 수 있다. 🥕 예를 들어 Redux는 순수 javascript 환경에서도 사용될 수 있다. 기존의 상태 관리 라이브러리들보다 recoil은 배우기 쉽고 훅을 사용하기에 사용하기 편리한 장점을 지닌다. npm install recoil yarn add recoil 위와 같은 명령어로 recoil을 설치할 수 있다. RecoilRoot로 하위 컴포넌트를 감싸 사용할 수 있다. import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( ); } export ..