-
[REACT] 리액트 상태와 전역상태관리란?개발일기/리액트 & 리액트 네이티브 2024. 5. 10. 18:06
✅ 상태란?
상태란 컴포넌트 내부에서 관리되며 애플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다.
변화하는 데이터 라고도 한다.- 상태들은 일관적이여야 한다. 즉, 서로 다른 컴포넌트에서 동일한 상태를 다룬다면 그 출처가 같아야 한다.
예를 들어, 인스타 피드에 공유된 포스트들을 보여주는 컴포넌트가 있고 그 포스트들의 개수를 나타내주는 컴포넌트가 있을 경우 두 가지 컴포넌트 모두 '내가 올린 포스트'라는 데이터를 가져와 사용한다.
만약 새로운 포스트를 올렸을 때 피드에 보이는 포스트는 11개, 그 개수룰 나타내는 컴포넌트는 10개를 나타낸다면 혼란을 가져다준다.따라서 일관성 즉, 데이터의 무결성은 정말 중요하다.
✅ 상태의 종류
📝 지역 상태 (local state)
지역 상태는 특정 컴포넌트 안에서만 관리되는 상태를 뜻한다.
다른 컴포넌트들과 데이터를 공유하지 않는다.
예를 들면, input, selectbox 등에서 사용자의 입력값을 받는 경우가 있다.📝 컴포넌트 간 상태 (cross component state)
컴포넌트 간 상태는 여러가지 컴포넌트에서 관리되는 상태를 나타낸다.
다수의 컴포넌트에서 쓰이고, 또 영향을 미치는 상태를 뜻한다.
예를 들면, 프로젝트 곳곳에서 쓰이는 모달이 있다.보통 상위 컴포넌트에서 하위 컴포넌트로 props를 넘겨 해당 컴포넌트까지 전달되도록 하는 props drilling 방식을 필요로 한다.
📝 전역 상태 (global state)
전역 상태는 프로젝트 전체에 영향을 끼치는 상태이다.
이 또한 props drilling 방식을 활용해서 부모에서 자식으로 데이터를 전달한다.
✅ 전역상태관리의 필요성
📝 서로 다른 두 컴포넌트에 같은 데이터가 필요한 경우 각 컴포넌트가 부모 자식 관계로 되어 있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달이 어렵다. 데이터를 부모 컴포넌트로 보내고 다시 그 데이터가 필요한 컴포넌트로 전달해야 하는데, 이러한 props drilling이 많아지면 props를 추적하기 어려워지며 유지관리도 어려워진다.
따라서 각 어플리케이션에 알맞은 상태관리 툴을 선택해 상태를 잘 관리하는 것이 중요하다.📝 일반적으로 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. 전역상태관리를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.
✅ 전역상태관리 라이브러리 사용추이
npm trends ✅ 전역상태관리를 도입해야 할 때 고려해야 할 사항?
모든 상태관리를 편안하게 전역으로 관리하면 안되나? 라는 물음이 생겼다. 아래와 같은 이유로 또는 경험적으로 프로젝트가 무거워지는걸 체감했다.
📝 복잡성 추가
전역 상태 관리를 도입하면 애플리케이션의 복잡성이 증가할 수 있습니다. 상태를 전역으로 관리함으로써 코드베이스가 더 복잡해질 수 있으며, 이로 인해 유지보수가 어려워질 수 있습니다.
📝 성능 저하
전역 상태 관리를 사용하면 모든 상태 변경이 중앙 집중식으로 이루어지므로 성능에 영향을 줄 수 있습니다. 특히 상태가 자주 변경되는 경우에는 이를 고려해야 합니다.
📝 필요성 여부
모든 상태를 전역으로 관리할 필요는 없습니다. 애플리케이션의 특정 부분에서만 필요한 상태는 해당 부분 내에서 로컬 상태로 관리하는 것이 더 적합할 수 있습니다.
📝 컴포넌트 분리
전역 상태 관리를 도입하면 컴포넌트 간의 결합도가 높아질 수 있습니다. 이로 인해 재사용성과 컴포넌트의 독립성이 저하될 수 있습니다.
✅ 전역상태관리는 언제 사용해야 할까?📝 애플리케이션 규모
애플리케이션이 커지면 상태 관리가 복잡해질 수 있습니다. 전역 상태 관리를 사용하면 모든 상태를 한 곳에서 관리하여 코드를 보다 쉽게 유지보수할 수 있습니다.
📝 컴포넌트 간 상태 공유
여러 컴포넌트가 동일한 상태를 공유해야 하는 경우, 전역 상태 관리를 사용하여 상태를 중앙 집중식으로 관리할 수 있습니다.
📝 복잡한 데이터 흐름
데이터 흐름이 복잡한 경우, 예를 들어 데이터가 여러 단계를 거쳐 전달되어야 하는 경우, 전역 상태 관리를 사용하여 데이터 흐름을 단순화할 수 있습니다.
📝 로컬 상태의 비지속성
일시적인 데이터 또는 한 번 로드되고 나서는 계속해서 사용되는 데이터는 전역 상태로 관리하는 것이 좋습니다. 이를 통해 불필요한 데이터를 다시 로드하는 것을 피하고 성능을 향상시킬 수 있습니다.
출처