관리 메뉴

동이의 개발일지

리덕스 본문

웹 개발/면접 질문 및 웹 관련 질문

리덕스

개발하는 동이 2024. 9. 13. 02:46
728x90

 

redux

 

리덕스는 리액트의 상태관리를 효율적으로 도와주는 도구이다.

리덕스는 왜 필요한가?
리액트를 사용하면서, 상태 관리를 하는 것은 매우 중요 요소 중 하나입니다. 리액트로 만들 수 있는 단일 페이지 애플래케이션은 데이터 혹은 유아이의 변화가 복잡해지거나 다양해지는 경우가 많아 그에 따른 데이터 교류가 복잡해지기 때문에 관리할 방법이 필요합니다. 리덕스는 이러한 리액트의 복잡한 상태 관리를 편리하게 만들어 줄 수 있는 도구입니다.

간단하게 이야기하면 우리는 리액트는 컴포넌트를 기반으로 하는 특징을 갖고 있어 우리는 개발을 할 때 하나의 페이지도 여러 컴포넌트로 나눠서 개발을 하게 될 것입니다.
그렇게 된다면 부모 컴포넌트와 여러 자식 컴포넌트가 생기게 될 것입니다.

예를 하나 들어봅시다. 만약 부모컴포넌트에서 내려주는 값을 99번 째 자식 컴포넌트에서 상태를 변경해야 한다면! 값을 어떻게 바꿔야 할까? 방법은 부모 컴포넌트까지 올라가서 바꿔야 합니다. 그렇게 된다면 엄청 복잡하겠죠?
트리 형식으로 이루어져 있기에 값을 찾고 그 상태를 바꾸기에는 정말 까다로울 것이고, 만약 더 깊은 999번 째 라면 더 까다로워질 것입니다.
이 떄 상태를 변경해야 할 때 쉽게 상태를 관리해 주는 것이 리덕스입니다. 

먼저 리덕스를 파기 전에 store라는 것에 대해 알아보도록 하겠습니다. 스토어는 상태 저장소를 말합니다.
스토어 안에는 현재 상태들, 리듀서, 그리고 몇가지 내장 함수를 포함하고 있습니다.

디스패치는 스토어의 내장 함수 중 하나로, 액션을 발생시켜 스토어에게 상태 변화가 필요하다는 것을 알리고 액션을 발생시킵니다.
그렇게 호출된 리듀서는 함수를 노출시키고, 액션에 맞는 로직대로 상태를 변화시키는 과정을 거칩니다.

리덕스를 공부하기 전 스토어, 디스패치, 구독에 대해서 알 필요가 있습니다.
스토어 - 라덕스에서는 한 애플리케이션 당 하나의 스토어를 만들고, 스토어 안에는 현재의 상태와 리듀서가 들어았고 추가적으로 내장함수가 더 들어가 있습니다,

디스패치 - 디스패치는 스토어의 내장함수 중 하나입니다, 디스패치는 액션을 발생시키는 것이라고 생각하면 편합니다. 액션을 파라미터로 전달하는 역할을 하고 있습니다
그렇게 호출을 하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 참고하여 새로운 상태를 만듭니다.

구독 - 스토어의 내장 함수 중 하나인데 구독 함수는 함수 형태의 값을 파라미터로 받아옵니다. 함수에 특정 함수를 전달해 주면 액션이 디패치 될 때마다 전달해 준 함수를 호출합니다.

728x90
반응형