[리액트] 전역상태관리 기준에 대한 고찰

다양한 상태를 관리하며 더 효율적인 상태관리에 대하여 고민하게 되었다.

 

📌 상태(state)는 무엇인가?

상태는 변하는 데이터이다.

더 정확히 말하자면 리렌더링에 영향을 미치는 변하는 값이다. 

리액트에서 페이지는 주로 props나 상태에 영향을 받아 컴포넌트가 변화할 때 리렌더링이 된다. 리렌더링이 유발되면 가상 dom에서 변경된 부분만 캐치하여 실제 dom에 반영되고 우리가 의도한대로 값을 변경하여 보여준다. 

 

📌 상태 관리의 종류

상태는 지역상태와 전역상태로 나뉘고 그에 따른 관리 방법이 다르다.

 

지역 상태 ( local state ) 관리

한 컴포넌트 안에서 useState를 통하여 상태를 선언하고ㅁ 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨 전달하는 props drilling 방식의 상태관리이다.

 

전역 상태 ( global state ) 관리

여러 컴포넌트에서 사용되는 상태를 한곳에서 중앙 집중적으로 관리하고 어떤 흐름에 얽매이지 않고 전역에서 사용가능하독 하는 방식의 상태관리이다.

 

📌 전역 상태관리를 하는 이유는?

여러 컴포넌트에 같은 데이터가 필요한 경우 각 컴포넌트가 부모 자식 관계로 되어 있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달이 어렵다.
데이터를 부모 컴포넌트로 보내고 다시 그 데이터가 필요한 컴포넌트로 전달해야 하는데, 이러한 props drilling이 많아지면 props를 추적하기 힘들어지고 유지보수가 어려워진다.

 

따라서 상황에 따라서는 전역 상태관리가 필요하다.

 

📌 전역 상태 관리 방법 3가지

전역 상태 관리 방법은 각각 적합한 상황에 맞게 사용하면 된다.

 

1. Context API

provider 하위의 모든 컴포넌트에서 리렌더링이 발생하기 때문에 상태 변경이 거의 일어나지 않는 값의 props drilling을 방지할 때 적절하다.

 

2. 전역 상태관리 라이브러리 ( Redux, Recoil .. )

 

3. 컴포넌트 합성

props로 컴포넌트를 전달하는 것

별도의 전역 라이브러리 설치와 학습이 필요없고, context api의 단점인 컴포넌트가 재사용이 어려워진다는 점을 보완할 수 있다.

 

 

🧐 전역 상태로 나누는 기준은 무엇인가

최근 생각하게 된 것은 어떤 기준으로 저 상태의 종류를 나눠야 하는지,, 전역 상태로 분류하기위해 어떤 기준을 세워야 하는 지에 대해서이다.

 

평소 정확한 기준은 없었지만 주로 나는 아래와 같은 상황에서 개인적인 판단 하에 전역 상태로 분류를 했었다.

1. props drilling의 depth가 깊어질 경우

2. 여러 페이지에서 사용되는 값일 경우

 

정확한 기준을 찾게 된 이유는 요즘들어 컴포넌트 분리에 초점을 맞춰 코드를 짜보려고 하는 경향 때문인 것 같다. 

단일성, 재사용성 등을 고려하여 컴포넌트가 잘게 나누어지는 경우가 종종 있는데, 이때 해당 페이지에서만 사용되는 상태임에도 심한 props drilling을 유발한다고 느꼈다. 이 경우 전역 상태로 넘길지 말지에 대해 고민스러웠다. 

 

결론적으로 고민을 해보아도 명확한 기준을 잡기는 어려웠다. 상태관리의 기준은 스스로 Bad Case를 많이 작성해보기도 하고 직접 맞아보면서 경험을 쌓아가며 만들어 가는 것밖엔 방법이 없는 것 같다..  

 

그러다가 결국 가장 좋은 상태관리는 관리할 상태가 없는 것이겠다는 생각이 들었다. 상태가 많아질수록 복잡해지고 사이드이펙트의 수가 늘어날 가능성이 크기 때문이다.

혹시 내가 지금 습관적으로 상태를 무분별하게 남발하고 있는 것은 아닐지 돌이켜보았다. 상태관리 방법에 대해 기준을 세우기 전에 최소한의 상태만을 남겨두는 것이 기본인데 그 기본부터가 잘 지켜지지 않는다고 느꼈다.

 

리액트 공식문서에 나와있는 상태의 조건은 다음과 같다.

- 부모로부터 props를 통해 전달되는가? -> state가 아니다

- 시간이 지나도 변하지 않는가? -> state가 아니다.

- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 그렇다면 state가 아니다.

 

모든 조건을 충족하였다면 상태가 어디에 위치해야 하는지를 정확히 아는 것이 중요하다.

컴포넌트들 간의 상호 관계, 데이터의 역할, 데이터의 흐름 등을 고려하여 위치를 설정해야 한다.

 

아직 상태관리에 대해 배워야 할 점이 많다. 어떤 기준을 세워 어떤 방법을 선택해야 하는 지를 경험으로 깨우친다는 것은 꽤 오래 걸리는 일이다. 이렇게 고민하는 순간순간이 모여 성장하는 것이 아닐까..!

나중에 많이 알게 되었을 때 꼭 이 게시글을 수정하러 와야지

 

 

 

 

---

 

출처

https://velog.io/@horang-e/React%EC%97%90%EC%84%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%EB%A5%BC-%EC%99%9C-%ED%95%A0%EA%B9%8C%EC%9A%94-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%ED%8F%89%EC%86%8C-state-%EA%B4%80%EB%A6%AC%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%98%EC%8B%9C%EB%82%98%EC%9A%94

https://mingule.tistory.com/74