안녕하세요 !!!
이번엔 상태관리에 대해서 손쉽게 사용하는 방법을 알아가려고 합니다 !!!
제가 회사에서 배우면서 저만의 느낌으로 좀 더 쉽게 이해하려고 한 부분들을 소개하려고 합니다 !!!
( 본문이 좀 길게 되는경우 파트를 나누겠습니다 ! )
먼저 Redux에 대해서 알아봅시다 !
Redux란?
Redux란 2015년에 Dan Abramov씨와 Andrew Clark씨에 의해 작성된 상태 관리 라이브러리입니다!
Flux 아키텍처 의 영향을 받아 프론트 엔드에서의 데이터 관리를 쉽고 견고하게 해줍니다 !
Redux 자체는 순수한 JS로 쓰여 있기 때문에 Vanila JS나 jQuery에서 사용할 수 있는 것은 물론이지만 단방향 데이터 바인딩을 하고 있는 React랑 가장 궁합이 좋습니다 !
Flux란?
애플리케이션에서 데이터 흐름 관리를 위한 아키텍처 패턴이며
View, Action, Dispatcher, Store의 4개의 요소로 구성되어 단방향으로 데이터가 흘러가는 것으로 데이터의 흐름을 쫓기 쉬워진다 는 특징이 있습니다. 그래서 React와의 궁합이 좋습니다 !!
뭐 여기까진 기본적으로 구글에서 쉽게 찾을 수 있는 글입니다 !!!
솔직히 저는 이번에 회사에서 Redux를 처음 써봤는데 더 쉽게 관리 할 수 있는데 Redux Toolkit를 써봤습니다 !! ( 물론 차이점이라던가 제가 어떻게 편하게 관리하면서 이해했는지 소개하려고 합니다 ! )
리덕스가 필요한지 확인하기
리덕스가 필요한 프로젝트에서는 리덕스를 아주 유용합니다 ! 하지만? 그렇지 않은 프로젝트에선 그저 개발을 귀찮게 만들 수 있습니다 !
따라서 ! 리덕스를 사용하기 전에는 꼭 현재 여러분의 프로젝트에 리덕스가 정말 필요한지 고민하시고 결정하시길 바랍니다 !
리액트 개발의 초창기(2015-2018)때는 리액트 프로젝트에서 리덕스를 사용하는 것이 당연시되어 왔습니다.
하지만 이제는 그럴 필요가 없습니다 ! 리액트 자체적인 기능만을 사용해도 리덕스 없이 프로젝트를 충분히 개발 할 수 있고 요즘은 다른 라이브러리들도 쉽게 나오는 편이니까요 !!!
리덕스를 사용하고싶은 분들 ! 여기서부터 중요합니당 !
자 먼저 ! Reduct에서 Redux를 사용하지 않으면 어떻게 할까요???
먼저 리액트는 컴포넌트를 만들어서 관리하며 재사용이 쉽습니다 !
하지만 컴포넌트도 부모가 있고 자식이 있는데요 !!!
자식이 많이 있는 경우 어떤식으로 부모로부터 데이터를 받을 수 있을까요?? 또한 자식과 자식간에 변수같은것들을 어떻게 관리해야할까요??
사진처럼 ! 부모에서부터 계속 props를 줘서 데이터를 보내고 보내고 .... 또 거기서 쓰고 상태관리를 해야하고...
저런게 많으면 너무 귀찮기도 하며 또한 어딘가에서 헷갈리게 사용하면 예상치 못한 곳에서 버그가 나기도 하고 어디서 버그가 났는지 디버깅 하기도 힘들때가 있습니다 !
그래서 !! 아래처럼 리덕스를 사용하면??
그냥 컴포넌트에서는 .. 어디서든 !! store에서만 사용하는 것들을 가져오면 됩니다 !!!
설명은 이게 끝입니다 !! 정말 쉽습니다 !
물론 ! 아래와 같이 어떤식으로 관리를 하면 좋을지에 대한것은 나오지만 !
제 생각하기에는 이렇게 리덕스는 아래와 같습니다.
Store ：상태를 관리하는 곳 즉 저장소
Reducer ：상태를 변화 시키는 곳 , 즉 변수를 저장하는곳
Actions ：상태를 변화시키는 함수 , 이름처럼 뭔가 액션을 취하는곳 ! 입니다
그럼 이번 블로그에서는 여기까지 이론만 알아보겠습니다 !
일단
일단 말로만 들으면 응?이라고 생각 하실수도 있습니다 .... 저도 그랬어요 ㅜㅜ
다음에는 실습모습과 Redux Toolkit를 이용하는 모습을 보여드리겠습니다 !! ( 그냥 리덕스를 이용하는것보다 더더더쉽습니다 ! )
아 ! 그리고 제가 리덕스를 안쓰는 회사와 사용하는 회사를 다녀봤는데 그 차이점에 대해서도 다음 실습시간에 써보겠습니다 !
