Redux 전역 상태 값은 전역 변수처럼 동작하나?

Redux 전역 상태 값은 전역 변수처럼 동작하나?

Vanilla JavaScript, React, Redux등으로 프론트엔드 개발을 진행하면서 전역(Global), 지역(Local) 상태 관리에 대한 이해가 부족하였습니다.

Vanilla JavaScript일 때 상태를 변화 시 DOM -> CSSOM -> Render Tree -> Layout -> Painting,
React일 때 상태 변화 시 Virtual DOM 생성 -> 비교 -> 실제 DOM에 적용 (테스크 큐 비어있을 때 실행),
전역 / 지역 상태 변화할 때 적절한 위치에서 상태 변화를 주지 않아 다음과 같은 과정을 겪지 않아도 될 곳에서도 다음과 같은 과정을 겪어 비효율적인 프로그램이 되고 있었습니다.

또한 면접을 보면서 관련 내용에 대해 정확히 알지 못하고 있다는 느낌이 강했었습니다.

그래서 상태 관리에 대해서 공부하고 상태관리에 대해서 다루는데 공부를 하던 중...
Redux 전역 상태는 JavaScript엔진에서 어떻게 동작할까? 라는 생각에서 출발해 전역 상태 값(객체)도 변수에 저장되고 사용하는데 어떻게 관리할까? 라는 의문점이 생겼습니다.

즉, JavaScript엔진에서 전역 상태 값이 전역 변수값처럼 동작 할 것 같다.라는 생각을 가지게 되었습니다.
=> 전역 상태 관리일 경우 JavaScript엔진에서 전역 변수의 동작과 마찬가지로 Redux의 전역 상태 관리 부분이 전역 Context에 위치하여 Call Stack 맨 밑부분에 위치하고 Chaining을 통해 값을 찾는다고 생각을 했었습니다.

그러나 ❌잘못된 생각❌이었습니다.
틀린 저의 생각을 고치기 위한 글을 작성해보겠습니다.

👣 설명

상태(State)

우선 상태(State) 란 무엇인지부터 시작하겠습니다.

프론트엔드 개발에서는 동적으로 변할 수 있는 것을 상태로 관리하고 상태의 변함에 따라 화면이 변하도록 만들어 졌습니다.

React에서는 상태(State)를 다음과 같이 정의합니다.
"Plain JavaScript Object hold information influences the output of render"
"렌더링 결과에 영향을 주는 정보를 가지고 있는 JavaScript 객체"

즉, 상태(State)는 애플리케이션의 렌더링에 영향을 끼치는 것이라고 정의할 수 있습니다.
그러면 상태관리는 애플리케이션의 렌더링에 영향을 끼치는 것을 관리하는 것 이라고 생각할 수 있습니다.

❗️상태 관리를 제대로 사용하지 못할 시 다음과 같은 문제들 발생합니다.

• 특정 상태의 영향을 받지 않아도 되는 컴포넌트들에 대한 Side effect(부작용) 발생
• Memoization이 안된 경우 상태 변화가 일어났을 때 하위 컴포넌트가 전부 리렌더링 됨

그래서 상태를 지역/전역 적절한 위치에 두어 관리하여 효율적인 코드를 작성해야 합니다. 전역 상태일 경우 Props Drilling과 같은 많은 문제점들을 해결할 수 있는 많은 장점들이 있지만 여러 곳에서 자유롭게 가져다 쓸 수 있어 side effect, 쓸데 없는 렌더링등 많은 문제를 야기합니다.

대표적인 전역 상태 관리 라이브러리인 Redux의 기본적인 내용은 패스 하겠습니다. 자세한 내용이 궁금하면 Click :)

변수

변수는 데이터를 저장하는 공간으로 프로그래밍의 아주 기본적이면서 중요한 개념입니다. 자세한 내용

전역 변수

함수의 외부에서 선언된 변수

JavsScript 동작원리은 다음과 같습니다.

이 동작을 살펴보면 첫 설명과 같이 Call Stack에 전역을 관리하는 실행 Context가 들어가고 다른 실행 Context를 넣어가며 동작합니다. 그래서 전역 값을 찾으려고 할 때 실행 Context의 Lexical Environment의 Outer Environment Reference의 체인을 타고 Environment Record에서 값을 발견하게 됩니다.

전역 변수 문제점

1. 암묵적 결합
   :모든 코드가 전역 변수를 참조하고 변경할 수 있어 위험성 증가
2. 긴 생명 주기
   :처음 생성되고 프로그램 종료시 없어지는 만큼 메모리 리소스를 오래 소비
3. 스코프 체인 상에서 종점에 존재
   : 동작 과정에서보면 타고타고 올라가야 하기 때문에 검색 속도가 느리다.

이러한 문제점들을 해결하기 위해 모듈화, IIFE(즉시 실행 함수)를 사용합니다.

👣 결과

상태와 변수에 대한 설명을 통해서 보면 어떻게 보면 전역 상태값도 데이터에 저장을 하는 것이기 때문에 변수라고 볼 수 있을 것 같습니다. 그러나 질문을 통해서 알아본 결과 전역 변수의 전역과 전역 상태의 전역의 의미는 다릅니다.

⭕️Redux의 전역의 의미는 단지, 모든 컴포넌트에서 접근할 수 있다. 입니다.
=> 전역 변수와 같이 전역 Context에 있는 것이 아니라 Redux 관련 함수 Context에 위치하여
State(일반 객체)를 모든 컴포넌트에서 connect, useSelector를 통해 참조하여 사용하는 것입니다.

👣 마무리

상태와 변수에 대해서 알아봤는데 사실 더 중요한 부분은 JavaScript엔진 동작 과정이며 JavaScript 엔진 동작 과정을 큰 틀로 보고 Redux의 함수등으로 감싼 실행 Context를 쌓아가며 동작한다. 라는 전재를 바탕으로 이해가 빠를 것 같습니다.

👣 REF

https://redux.js.org/tutorials/essentials/part-1-overview-concepts
https://yceffort.kr/2022/04/deep-dive-in-react-rendering
https://acaroom.net/en/blog/youngdeok/react%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-%EC%A0%95%EB%A6%AC
https://ko.javascript.info/variables
https://dev.to/yezyilomo/you-can-definitely-use-global-variables-to-manage-global-state-in-react-17l3
https://redux.js.org/tutorials/essentials/part-1-overview-concepts
https://blog.toycrane.xyz/%EC%A7%84%EC%A7%9C-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-c7fbdc44cc97
https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://jbee.io/react/thinking-about-global-state/
https://medium.com/@yujso66/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%EC%9D%98-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%9D%90%EB%A6%84-6e5ed0022e39