[React] Redux(리덕스) 사용해보기

💻 결과화면

📕 새로 알게된 개념

 

✔ 리덕스가 생성, 실행 하는 과정

동작 과정을 간단하게 정리해서 새로운 개념들을 먼저 이해하고 어떻게 동작하는지를 먼저 파악했다.

- action : 프로젝트 상태에 변화를 일으킨다.

- reducer : 액션 객체를 받아서 상태를 어떻게 변경할 것인지 정의하는 함수

- store : 스토어는 리덕스에서 state를 저장하고 관리하는 객체

- render : UI를 렌더링하는 메서드 혹은 함수

- subscribe : 스토어가 변경될 때마다 render함수가 호출되도록 하는 역할

- dispatch : 액션을 발생시키는 것 

 

✔ 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다.

이 말이 처음에는 굉장히 모순이라고 생각했다. 변하지 않는 속성을 유지하면서 변화를 일으켜 주어야 한다? 이게 무슨말이지... 좀 더 개념을 찾아 보았다. 우선 리듀서가 어떤 역할을 하는지 알아야 한다. 리듀서는 상태 관리를 담당하는 함수로 애플리케이션 상태(action)을 변경하는데 사용된다.

 

✔ 그렇다면 왜 리듀서는 불변성을 유지해야할까? 불변성을 유지하면 장점이 뭘까?

- 상태의 불변성을 유지하면 데이터가 언제 어떻게 변경되는지 예측하기가 쉽다. -> 언제 변경되는지 예측이 되면 이전 상태로 되돌리거나 새로운 상태로 교체하기가 용이 하다. -> 상태 관리 라이브러리에서 변화를 감지하기 쉽고 불필요한 렌더링을 줄이고 성능을 최적화 할 수 있다.

 

리듀서에서 말하는 불변성의 장점을 파악하고 나니 모순적인 말의 의문이 풀렸다. 데이터를 유지하는 방식은 useState와 유사하게 동작하는 것이다. useState도 기존 상태를 직접 수정하지 않고 새로운 상태를 생성하는 방식을 사용한다. 

알고보니 내가 알고 있는 개념이었는데 문장이 달라지니 다르게 받아들였던 것 같다.

 

📒프로젝트 깃허브 주소