본문 바로가기

📰 Front-end/상태관리3

[Redux/Redux ToolKit] Redux로 상태관리를 해보자 (Flux 패턴이란?) Redux는 Flux 패턴을 기반으로 한 상태 관리 라이브러리이다.⭐ React에서 상태 관리가 필요한 이유는? React는 데이터를 전달할때 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달되는데(단방향)이렇게 여러 컴포넌트를 타고 전달하면 props drilling이 많아지고 props가 어디에서 왔는지 확인이 어렵기 때문에 상태관리를 해야한다. 📝 Flux 패턴이란?Flux는 데이터를 취급하기 위한 패턴이다. 즉, 데이터가 애플리케이션을 흐르는 방식이다.문제점Facebook에서 고질적인 알림 버그가 있었다.메시지 아이콘에 알림이 떠 있지만, 그 아이콘을 클릭해서 들어가면 아무런 메시지가 없는 버그.팀이 이 버그를 고치고 얼마동안은 괜찮았지만 [업데이트를 하다보면] 곧 다시 나타났다.단기적인.. 2024. 9. 10.

[Zustand] Zustand로 상태관리를 해보자! 많은 상태관리 라이브러리 중 요즘 떠오르는 'Zustand'. npm trends 사이트를 가서 검색을 해보니 역시 1위는 redux지만 놀랍게도 2위가 Zustand다.2년전만해도 recoil이 막 뜬다. 라는 소문이 있어서 사용해봤는데... 이젠 저 밑에 있네..(recoil 만드신 개발자분도 퇴사했다는 소식이......) 그래서 Zustand가 왜 인기가 있는데? 무슨 라이브러리인데? Zustand는 독일어로 '상태'라는 뜻을 가진 라이브러리로, 간결한 플럭스(Flux) 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리이다. 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하고 보일러 플레이트가 최소화되어 있어 스토어 형태임에도 굉장히 간단하게 상태관리를 할 수 있다. 또한,use.. 2024. 6. 8.

[Redux] createStore를 해보자 Redux를 시작하려면 뭐부터 해야할까?바로 상태를 관리하는 오직 하나의 공간인 store를 만들어야한다.최근 면접과정에서 라이브코딩으로 Redux의 store를 만드는 함수를 구현하라는 문제가 나왔다.아이고.. 라이브러리를 로드해서 사용할 줄만 알았지..안에 돌아가는 메커니즘을 자세히 알려고하지않았던 내 지난 과오가 머릿속에서 좌르륵 흘러갔다. 네.. 그렇게 아무것도 하지 못한 채 면접은 끝이났고, 아쉽지만 어쩌겠나.지금부터 해보자. Store우선, store는 전역 상태를 가진다.const store = { getState, subscribe, dispatch,} 그리고 전역 상태를 조회하는 getState, 자신이 관리하고 있는 전역 상태를 구독(상태가 변경되면 변경되었음을 전달)할 수 있는 su.. 2024. 5. 27.

이전 1 다음

티스토리툴바