준영이의 성장일기(FrontEnd)

전역으로 데이터를 관리해야하는 경우는? 본문

프론트엔드/상태관리

전역으로 데이터를 관리해야하는 경우는?

Jay_Jung 2024. 8. 14. 15:29

 

최근 프로젝트를 하면서 전역으로 데이터를 관리하기 위해 Zustand와 같은 전역 상태관리 라이브러리를 사용하고 있다.

그래서 컴포넌트간의 데이터 공유와 상태 관리를 보다 효율적으로 처리하는데 도움이 되는 전역 상태관리에 대해서 정리하고자 한다.

 

 

<전역 상태 관리(State Management)를 사용해야 하는 경우>

전역 상태 관리를 사용하는 대표적인 경우는 다음과 같은 경우가 있다.

 

1. 여러 컴포넌트 간에 데이터를 공유해야 할 때

 

여러 컴포넌트가 동일한 데이터를 필요로 하거나, 특정 컴포넌트에서 발생한 상태 변화가 다른 컴포넌트에도 영향을 미쳐야 할 때 전역 상태 관리가 유용하다. 예를 들어, 로그인 상태, 사용자 정보, 테마 설정 같은 데이터는 여러 컴포넌트에서 참조할 수 있기 때문에 전역 상태로 관리하는 것이 좋다. 로그인의 경우 만약 준영 서점의 사장이 로그인 한다고 가정 하면 사장이 가지고 있는 준영 서점의 책의 갯수를 알기 위해서는 로그인을 한뒤 사장의 정보를 전역적으로 관리해줘야  사장의 정보에 해당하는 서점의 책의 갯수를 알 수 있다.

 

2. 상태가 계층 구조의 깊은 컴포넌트까지 전달되어야 할 때

 

상위 컴포넌트로 부터 하위 컴포넌트 까지 데이터를 계속 전달해야 하는 경우, 일명 "prop drilling" 문제가 발생할 수 있는데 이때 전역 상태 관리를 사용하면 상태를 상위에서부터 계층적으로 전달할 필요 없이 바로 사용할 수 있어 prop drilling 문제를 해결할 수 있다. 

 

 

<전역 상태 관리(State Management)를 사용 안 해야 하는 경우>

반대로 전역 상태 관리를 사용하지 않는 대표적인 경우는 다음과 같은 경우가 있다.

 

1. 로컬 상태로 충분한 경우

 

상태가 특정 컴포넌트 내에서만 사용되고, 다른 컴포넌트와 공유할 필요가 없는 경우에는 굳이 전역 상태 관리가 필요하지 않다. 

 

2. 상태가 부모와 자식 간에만 공유되는 경우

 

상태가 부모 컴포넌트와 몇 개의 자식 컴포넌트 간에만 공유된다면, prop을 통해 상태를 전달하는 방식으로 충분히 관리할 수 있다. 부모 컴포넌트를 기준, 계층적으로 자식 컴포넌트의 수가 많지 않다면(prop drilling이 발생하지 않는다면) 자식 컴포넌트에 prop을 넘겨주어 구현하는 것이 코드의 복잡성을 줄일 수 있다.