React 공부하기 - Redux란?

Redux

Redux란 간단하게 말하면 상태를 관리해주는 라이브러리이다.

React의 Props와 State

React에서는 대표적으로 Props와 State라는 두 가지의 개념이 존재한다.
Props는 Property의 준말로 component간에 정보의 이동이 존재하는 경우 이용된다.
Props의 특징은 불변성이다. A라는 component에서 B라는 component에게 'hello'라는 정보를 줬을 경우, 이는 Immutable, 즉 불변하게 존재한다. 따라서 B는 A가 준 정보를 변경할 수 없다.
반면 State는 component 안에서 데이터를 전달하는 경우 사용된다. Props와 다르게 mutable하며 State가 변하면 re-render가 된다는 특징이 있다.

Redux를 왜 사용할까?

출처: https://velog.io/@ppmyor

위 그림은 Redux를 활용할 때와, 사용하지 않을 때 component가 관리되는 모습을 시각화 한 것이다.
Redux가 없는 경우 가장 밑에 있는 component에서 최상위 conponent에게 전달해야 하는 event가 있는 경우, 부모 component를 하나하나 타고 올라가야 한다는 문제가 존재한다.
하지만 Redux를 사용하면, 어떤 component에서 이벤트가 발생하더라도 Redux store에 직접 전달할 수 있게 되기 때문에 관리의 편리성와 효율성이 증대된다.

Redux의 작동 방식

출처: https://velog.io/@ppmyor

Reducer의 작동 방식

(previousState, action) => nextState

이전 State와 action을 받은 후, 다음 State를 리턴하는 형태로 역할을 수행한다.

Store의 역할

Apllication의 State를 감싸주는 역할을 하며, 다양한 Method를 통해 State를 효율적으로 관리할 수 있게 도와준다.