Redux

전역 상태 관리

JavaScript 등을 처음 접할 때 전역 변수를 남용하는 것은 좋지 않다고 배웠지만, 경우에 따라 전역 상태가 필요한 경우가 있다.

서로 다른 컴포넌트가 사용하는 상태의 종류가 다른 경우, 꼭 전역 상태일 필요는 없다, 출처(source)가 달라도 된다는 뜻이다.

하지만 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만일 사본이 있을 경우, 두 데이터는 서로 동기화(sync) 하는 과정이 필요한데, 이는 문제를 어렵게 만들기에 한 곳에서만 상태를 저장하고 접근해야 한다. 여기서 ‘하나의 출처’는 다른 말로 이야기 하면 ‘전역 공간’이라고 볼 수 있다.

데이터의 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 하자. Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙이다.

그렇다면 전역으로 상태를 관리해야 하는 경우가 어떤 것이 있을까?

여러 사이트에서 제공하는 다크모드 기능의 경우 모든 페이지, 모든 컴포넌트에 다크 모드 혹은 라이트 모드가 적용이 되어야 하기 때문에 이러한 테마 설정을 전역으로 관리할 수도 있다.

국제화(Globalization) 설정도 마찬가지이다. 사용자가 사용하는 브라우저나 운영체제가 특정 언어를 사용하고 있음을 알아내서, UI에 필요한 텍스트 리소스를 따로 저장한 후, 전역 상태로 관리하기도 한다. 이 기능의 경우 모든 컴포넌트에서 사용자 언어로 표현이 되어야 하기 때문에 전역에서 상태 관리가 필요하다.

Props Drilling

Props Drilling은 상위 컴포넌트의 state를 prop를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들은 거치면서 데이터를 전달하는 현상을 의미한다.

Props Drilling의 문제점

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다.

• 코드의 가독성이 매우 나빠지게 된다.
• 코드의 유지보수 또한 힘들어진다.
• state 변경시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. 따라서, 웹 성능에 악영향을 줄 수 있다.

해결 방법

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다. 상태관리 라이브러리를 사용하게 되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다. 다양한 상태관리 라이브러리(Redux, Context api, Mobx, Recoil 등)이 존재한다.

Redux