Redux가 뭐에요??
React도 props와 state에 혼나고 있는 와중에
Redux는 또 뭘까...
우리는 React에서 컴포넌트안에서 상태를 관리하고
부모 컴포넌트에서 자식 컴포넌트에게 상태를 전달하는 과정에서
머리가 혼란스러워지는 경험을 했다.
그 단점을 보완할 수 있는것이 Redux라고 한다.
상태를 컴포넌트 바깥에서 하여,
자식 컴포넌트에서 쉽게 접근가능하다는 것이다.
이 말을 들었을때는, 그럼 React를 복잡하지 않고 쉽게 사용 할 수 있는걸까!!? 라는 생각이 들었다.
좀 더 자세히 알아보자
React에 Redux가 필요한 이유가 무엇일까?
리액트로 프로젝트를 진행하게 되면, Component는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다.
local state: 각각의 Component가 가지는 state, 어플리케이션은 이 state를 기반으로 만들어진다.
global state: 예를 들어, 유저의 로그인의 유무에 따라 어플리케이션의 state가 달리 보이는 것을 들 수 있다. 어플리케이션 전체에서 global state는 유지, 즉 local state는 global state를 공유하게 되는 것이다.
기존의 방법으로, React만을 사용하여 프로젝트를 진행 할 경우,
이 state를 관리하는게 까다롭다.
Redux의 필요성을 쉽게 알아 볼 수 있는 그림을 가지고 와보았다.
만약 쇼핑몰 프로젝트를 진행한다고 가정해보자
우리는 가장 최상단 컴포넌트인 APP.js에서 cart state를 만들고, 각각의 컴포넌트에 이를 props로 전달하여 관리 할 수 있다.
하지만 프로젝트의 규모가 커지고, 수많은 컴포넌트가 생긴다면 어떻게될까?
단방향 흐름으로인하여, 우리는 cartitem.js에 state를 전달하기 위해서는 많은 컴포넌트를 거쳐가야하는 불필요한 데이터의 흐름이 발생한다.
하지만 Redux는 컴포넌트 밖에 존재하기 때문에 필요한 컴포넌트에서 Redux에게 state를 받아오기만 하면 끝이다.
