리덕스를 사용하는 이유
리액트로 프로젝트를 진행한다면 App 컴포넌트를 거쳐서 필요한 값을 업데이트하고
리렌더링 하는 방식으로 프로젝트가 개발되는데
위의 구조는 부모 컴포넌트에서 모든 걸 관리하고 아래로 내려주는 것이기 때문에
직관적이고 관리하는 것이 편하다는 장점이 있지만
프로젝트의 규모가 커졌을 때 보이는 컴포넌트의 개수가 늘어나면서
다루는 데이터도 늘어나고 그 데이터를 업데이트하는 함수들도 늘어나게 됩니다.
따라서 프로젝트의 규모가 커진다면 App의 코드가 길어지고 유지 보수하는 것이 힘들어집니다.
리덕스를 사용 시 프로젝트의 규모가 커진다면 상태관리를 컴포넌트 밖에서 할 수 있기 때문에
상태 값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 밖에서 관리할 수 있습니다!
리덕스를 프로젝트에 적용하게 되면 스토어가 생기는데
스토어 안에는 프로젝트의 상태에 관한 데이터가 담겨있고
컴포넌트가 스토어에 구독을 하면 구독을 하는 과정에서 특정 함수가 스토어에 전달됩니다.
그 후 스토어의 상태 값에 변동이 생기면 전달받았던 함수를 호출해줍니다.
만약 특정 컴포넌트에 이벤트가 생겨 상태를 변화 할 일이 생기게 되면
dispatch라는 함수를 통해 액션을 스토어에 던져줍니다.
액션은 상태에 변화를 일으킬 때 참조할 수 있는 객체이고
액션 객체는 필수적으로 type을 가지고 있어야 합니다.
예를 들자면
{ type : 'INCREMENT', num: 3 } 란 객체를 전달받게 된다면
num 값을 참고해 기존 값에 3을 더하게 되고 이때 type을 제외한 값은 optional입니다.
리듀서
액션 객체를 받으면 전달받은 액션의 타입에 따라 어떻게 상태를 업데이트해야 할지 정의해야 합니다.
이러한 업데이트 로직을 정의하는 함수를 리듀서라 합니다.
또한, 리듀서는 변화를 일으키는 함수라 말할 수 있습니다.
type 이 INCREMET라는 액션이 들어오면 숫자를 더해주는 작업을 리듀서에서 할 수 있습니다.
리듀서 함수는 두 가지의 파라미터를 받는데
state : 현재 상태 / action : 액션 객체
위의 두가지 파라미터를 참조하여 새로운 상태 객체를 만들어 반환합니다!
두가지 파라미터를 참조하여 새로운 상태 객체를 반환하는 방법은
현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어 반환하는 방식입니다.
상태에 변화가 생기면 이전에 컴포넌트가 구독할 때 전달해줬던 함수 리스너가 호출되고
이를 통해 컴포넌트는 새로운 상태를 받고 컴포넌트는 리렌더링을 하게 됩니다.
'FrontEnd' 카테고리의 다른 글
선언적 프로그래밍과 명령적 프로그래밍 (0) | 2023.08.20 |
---|---|
Redux] 리덕스 툴킷 configureStore (0) | 2022.01.06 |
FrontEnd] Axios 와 Fetch의 차이점 (0) | 2022.01.04 |
Redux] 불변성 유지 (0) | 2021.12.30 |