Redux를 왜 쓸까

리액트로 프로젝트를 하다보면 상태 관리에 어려움을 느끼는 경우가 많습니다. 컴포넌트 별로 공유 되어야 하는 상태를 다룰 때 보통 상태 끌어올리기를 통해서 해결하게 됩니다. 하지만 props로 넘겨지는 상태가 많아지고 그 깊이가 깊어지면 코드 자체가 복잡해져 관리가 어려워집니다. 이럴 때 고려해 볼 수 있는 것이 Redux와 같은 상태 관리 라이브러리를 사용하는 것입니다.

상태 끌어올리기

앞서 말했듯이, 같은 상태를 여러 컴포넌트가 공유를 해야하는 경우가 생기게 됩니다. 이때는 상태 끌어올리기를 통해서 공유되는 상태를 필요로 하는 컴포넌트들을 자식으로 가지고 있는 상위 컴포넌트에서 상태와 상태 변경 함수를 내려주는 방식으로 그 문제를 해결하게 됩니다.

위의 사진을 보게 되면 App컴포넌트에서 자식 컴포넌트에게 user를 props로 넘겨주고 있습니다. user상태를 자식 컴포넌트인 Header와 Main에서 사용하기 때문입니다. 이렇게 상태를 공유해야 하는 경우는 상위 컴포넌트에서 그 상태를 만들고 props로 내려주는 방식을 사용하게 됩니다.

props drilling

여러 컴포넌트에서 상태를 공유해야 할 때는 상태 끌어올리기를 통해 그 문제를 해결한다고 했습니다. 하지만, 프로젝트가 복잡해지고 상태를 공유하는 컴포넌트가 많아지게 되면, 깊이 있는 컴포넌트에서 해당 상태가 필요한 경우엔 props로 계속 내려야합니다.

위 사진은 순서대로 Main컴포넌트 Aside컴포넌트 Modal컴포넌트입니다.

Aside컴포넌트에서는 user를 이용해서 어떤 기능도 구현하고 있지 않습니다. 단지 Aside의 자식 컴포넌트로 있는 Modal에서 user를 사용하기 때문에 이를 위해 user상태를 계속 내려 받은 것입니다.

이렇게 상태를 props로 계속 내려받아 코드의 가독성을 떨어뜨리게 되는 경우 props drilling이 일어났다고 합니다.

Redux

상태 관리에 있어 위의 문제로 어려움이 있다면 고려할 것이 상태관리 라이브러리입니다. 그 중 Flux 구조를 기반으로 상태 관리를 도와주는 라이브러리인 redux에 대해 알아봅시다.

Flux구조란 위 사진과 같은 것이라고 생각하며 됩니다. 데이터의 흐름이 한 방향으로만 흐르도록 만들어 복잡한 구조의 어플리케이션에서 상태 관리를 쉽게할 수 있도록 한 것입니다. Redux는 이런 구조를 가지고 상태를 관리하고 있습니다. 상태를 변경할 수 있는 방법은 유일하게 Action을 이용하는 것입니다. dispatch 함수에 특정 action을 넘겨주게 되면 그에 맞게 상태가 변하는 방식입니다.

그렇다면 Redux로 어떻게 위의 문제를 해결할 수 있다는 것일까요?

리덕스는 store를 통해서 상태를 가지고 있고 이를 이용해서 컴포넌트가 어디에 있던지 값을 가져올 수 있게 됩니다. 위 사진과 같은 방식으로 값을 가져오게 됩니다.

또한, 한 컴포넌트에서 해당 상태에 변화를 주게 된다면 그 상태를 쓰는 컴포넌트들도 같이 렌더링이 되게 됩니다. props로 전달되었다면 중간에 위치한 컴포넌트들도 필요없는 리렌더링이 발생할 수 있었지만, 리덕스를 이용하면 그 문제를 해결할 수 있습니다.

Redux는 다음과 같은 순서로 상태를 관리합니다.

상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.

이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
상태가 변경되면, React는 화면을 다시 렌더링 합니다.

그렇기 때문에

리덕스는 여러 컴포넌트가 같은 상태를 공유해야할 때 사용하는 것을 고려해볼 수 있습니다. 하지만, 프로젝트의 크기가 작아서 상태 끌어올리기로 큰 무리없이 기능을 구현할 수 있다면, 리덕스를 사용하지 않는 것이 더 좋을 것입니다. 리덕스를 사용하기 위한 코드를 작성하는 것이 props 몇 개 내려주는 것보다 더 힘들 수 있기 때문이죠. 이런 것들을 고려해서 리덕스를 적용할 지 고민하고 결정하는 것이 좋습니다. React의 Context API를 이용하면 props drilling문제는 해결할 수 있겠네요. 단, 상태 관리는 고려해야겠군요.