[React] 리덕스(Redux)는 왜 쓰는 걸까?

리액트로 관리되는 웹페이지는 크게 부모 컴포넌트와 자식 컴포넌트로 나뉩니다. 이때 부모 컴포넌트는 자식 컴포넌트에 속성을 전달하게 됩니다. 그런데 부모 컴포넌트가 자식 컴포넌트에 전달하는 것들은 크게 속성(props)과 상태(state)가 있습니다.

속성(props)은 본질적으로 불변하는 컴포넌트의 특징을 말합니다. 따라서 만일 부모 컴포넌트의 속성이 변경된다면, 자식 컴포넌트의 속성도 자동적으로 업데이트됩니다. 반면, 상태는 컴포넌트의 가변적인 성질을 말합니다. 버튼을 눌렀을 때 버튼의 색상이 파란색에서 주황색으로 변경되는 코드를 작성하였다면, 이때 버튼의 색상은 상태에 해당합니다. 즉, 상태는 특정 메서드가 실행될 때 변경될 수 있도록 하는 컴포넌트 객체의 성질이라고 할 수 있습니다. 다른 예를 들자면, 쇼핑몰 사이트에서 상품의 구매수량을 1개에 2개로 늘리기 위해 (+) 버튼을 누르신 적이 있으실 겁이다. 이때 역시 장바구니에 담긴 객체의 상태(구체적으로는 구매수량에 관한 상태)가 1에서 2로 변경됩니다. 

부모 컴포넌트의 상태 변경이 발생할 때마다 자식 컴포넌트에 전달되는데, 문제는 부모 컴포넌트의 자식컴포넌트들이 많아질수록, 이러한 상태변경을 관리하는 게 힘들어집니다. 상태변경이 발생할 때마다 부모 컴포넌트로부터 자식 컴포넌트까지 일일이 전달한 다음에 이를 화면에 렌더링하여야 합니다. 문제는, 부모컴포넌트와 자식컴포넌트 간의 관계가 복잡 다기해 질수록, 렌더링이 제대로 되지 않았을 때 중간의 어느 컴포넌트에서 문제가 발생했는지 그 원인을 찾는 것이 쉽지 않고, 개발자의 입장에서 컴포넌트 간의 부모-자식 관계를 신경쓰지 않고, 특정 컴포넌트의 상태값을 다른 컴포넌트에 그대로 가져오고 싶을 때, 그렇게 할 수 없다는 점이 불편한 점으로 다가옵니다.

리덕스는  바로 이러한 상태변경을 관리하는 것을 보다 용이하게 돕는 역할을 합니다. 리덕스를 사용하면 컴포넌트의 상태변화는 부모에 의존적이지 않고, 컴포넌트의 바깥에서, 구제척으로 리덕스 스토어(Redux Store)에서 관리됩니다. 따라서 각 컴포넌트들은 상태관리를 독립적으로 할 수 있게 되며, 부모-자식 관계 여부를 따지지 않고, 리덕스 스토어에 저장된 상태값을 필요한 컴포넌트에 가져와 쓸 수 있습니다.