🔎 전역 상태 관리를 언제 왜 쓰는 거지?

우선 둘의 차이점은 전역 상태 관리를 언제 쓰게 되는 것인지를 고려해 보면 단번에 알 수 있다.

useState와 같이 지역적으로 상태관리를 하면 프로젝트의 규모가 커질 수록 다른 컴포넌트로 전달해야 하는 props도 많아지고, 컴포넌트의 상하 관계에 대한 이해도 복잡해 질 것이다.

이때 만약 최상위 부모에서 최하위 자식 컴포넌트에게 어떠한 상태를 전달하고 싶으면?

props로 하위 컴포넌트들에 전달전달전달… 해야 한다.

각 중간 중간의 자식 컴포넌트들이 props를 전달받고 사용하는 데 의존하게 되면, 해당 하위 컴포넌트들을 수정할 때마다 상위 컴포넌트의 구조나 props를 변경해야 할 수도 있다.

이는 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만든다!!!

🔧 useState와 useReducer를 활용한 지역 상태 관리

1. useState는 컴포넌트 내부에서 간단한 상태를 관리할 때 유용하다.

   주로 단순한 형태의 데이터 (예: boolean 값이나 간단한 문자열)나 컴포넌트별로 독립적인 상태를 유지할 때 많이 사용된다. useState는 상태를 업데이트할 때마다 해당 컴포넌트가 리렌더링되며, 특정 컴포넌트 안에서만 상태가 사용되므로 부모와 자식 간의 상태 공유가 필요 없는 경우에 적합하다.

2. useReducer는 더 복잡한 상태 로직을 관리할 때 유용하다.

   useState와 유사하게 컴포넌트의 지역 상태로 작동하지만, 액션 기반으로 상태를 업데이트할 수 있어 여러 개의 상태 업데이트 로직을 하나의 리듀서 함수로 관리할 수 있다. 즉, 상태 업데이트 로직이 중앙 집중화되어 가독성이 좋아지고, 복잡한 상태를 더 쉽게 관리할 수 있다.