Zustand는 강의가 없어서 어떻게 연습해볼 수 있을까 고민하다가, 아무래도 다양한 자료를 찾아보는 것보다는 직접 코드를 작성해보고 한 줄씩 해석해보는게 더 빨리 익힐 수 있으니까 지난번처럼 공부하면서 만들었던 코드를 리팩토링해보기로 했다. 이번에는 Zustand로 전역에서 상태관리를 하는 로직이어서, 개인 프로젝트 당시에 Redux로 로그인 여부를 확인하고 Header에 반영시켰던 로직을 수정해보았다.이번에 리팩토링한 기존 코드는 아래 주소에 있다.(헤더, 로그인 페이지 모두 수정했지만 가장 간단한 헤더 링크를 가져왔다.)https://github.com/hjinn0813/cinetalk/blob/devel/src/components/Header/Header.jsx기존의 코드는 Redux를 사용해서 ..

Redux, Zustand 같은 전역 상태관리 라이브러리는 Flux 패턴을 기반으로 만들어졌다.나는 이미 Redux를 사용해봤기 때문에 Flux 패턴에 대해서도 특징과 장단점을 알고 있지만, 텍스트로 정리해두면 좋을 것 같아서 기본적인 개념부터 이와 반대되는 패턴들까지 정리해본다.✍Flux 패턴웹 애플리케이션의 전역 상태 관리를 더욱 효율적이고 일관되게 할 수 있도록 설계된 아키텍처 패턴.2014년에 Facebook에 의해 개발되었으며, 다양한 JS 라이브러리나 프레임워크에서 사용되지만 특히 React에서 주로 사용되고 있다. 단방향 데이터 흐름을 통해 상태 변경을 명확하게 추적하고 관리할 수 있다는 장점이 있다.Flux 패턴의 특징단방향 데이터 흐름 (Unidirectional Data Flow): 데..

기존에 React를 공부하면서 상태관리 라이브러리는 Redux를 사용했었다. 아는게 그것 뿐이었고 가장 많이 사용하는 도구여서 사용했지만, Redux는 구조가 매우 복잡해서 처음 학습할 때부터 이해하기가 어려웠다. 최근에 React의 상태관리 라이브러리로 Zustand가 떠오르는 추세여서 기본적인 개념을 공부해봤다.ZustandReact에서 최소한의 API를 사용하여 직관적이고 가벼운 방법으로 전역 상태를 관리할 수 있는 라이브러리.독일어로 "상태"를 의미하며, 2020년 3월에 처음 출시되었다.React의 상태 관리 시스템 (Context API나 useState, useReducer 등)의 대체제나 보완제로 사용된다. "store"라는 개념을 사용하여 전역 상태를 관리하며, 이 store는 상태(st..

이번달 초에 좋은 기회로 카카오 현직 개발자에게 커리어코칭을 받았는데, 당시에 내 포트폴리오를 첨삭받으며 Redux-thunk와 Redux-saga에 대해 알게 됐었다. 이번에 개인 프로젝트를 진행해보며 추가적인 공부가 필요한 기술들을 발견해서, 본격적으로 학습하기 전에 기본적인 개념부터 여기에 정리해두려고 한다.일단 Redux-thunk, Redux-saga 둘 다 Redux에서 비동기 작업을 처리하는데 도움을 주는 미들웨어인데, 작업 처리 방식이 약간 다르다.Redux-thunk가장 간단하고 기본적인 Redux 미들웨어로, "thunk"는 일반적으로 함수가 함수로서 사용되는 패턴을 의미한다.액션 생성자가 함수가 될 수 있도록 해준다. 이 함수는 dispatch를 호출하여 액션을 보낼 수 있고, 비동기..

오늘은 React의 상태 관리 라이브러리인 Redux에 대해서 배웠다. 이건 수업 시간에 따라가긴 했는데 제대로 이해하지는 못했어서, 수업에서 실험했던 코드들을 살펴보면서 완전한 내 것으로 만들려고 한다.State의 종류Local State : useState()를 통해 각각의 컴포넌트가 소유하고 있는 상태. 해당 컴포넌트 내에서만 관리되고 사용된다.Cross-Component State : 두 개 이상의 컴포넌트 간에 props를 통해 공유되는 상태.App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태. 여러 컴포넌트, 혹은 앱의 전체 영역에서 공유해야하는 데이터나 상태에 사용됨.React의 상태관리npm으로 설치해야하는 라이브러리 사용, 또는 React의 기본 기능인 context..