React의 '상태 끌어올리기'와 Zustand를 활용한 상태 관리
React는 컴포넌트 간의 데이터 흐름을 관리하기 위해 ‘상태 끌어올리기(Lift up state)’라는 개념을 제공한다. 하지만 이 방법은 애플리케이션의 복잡도가 증가하면서 관리에 어려움을 겪을 수 있다. 이러한 문제를 해결하기 위해 Zustand와 같은 상태 관리 라이브러리를 활용할 수 있다.
React의 Lift up state란 무엇일까?
React는 ‘단방향 데이터 흐름’이라는 원칙을 따른다. 이 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 데이터를 전달받아 사용한다. 하위 컴포넌트에서 발생하는 이벤트로 인해 상위 컴포넌트의 상태가 변경되는 경우, 이를 ‘상태 끌어올리기’라고 한다.
상위 컴포넌트의 상태를 변경하는 함수를 하위 컴포넌트로 전달하고, 하위 컴포넌트에서 이 함수를 실행하는 방식으로 작동한다.
단방향 데이터 흐름인 이유?
- 단방향 데이터 흐름을 사용하지 않으면 그때 그때 기능 변경 사항에 대해서 코드를 계속 작성해야 한다.
- 코드의 흐름을 알기 쉽다. 복잡하지 않게 된다.
- 컴포넌트의 중요한 상태만 잘 관리한다면
- 아래에서 UI가 자동으로 변경된다. (다소 중앙집권적, 중요데이터 하나가 변경되었을 때, 많은 컴포넌트에 영향을 주는 것을 굳이 작성하지 않아도 된다.)
‘상태 끌어올리기’의 단점
‘상태 끌어올리기’는 다음과 같은 단점들이 있다:
- 복잡성 증가: 상태를 끌어올리는 패턴은 컴포넌트 간의 데이터 흐름을 관리하는 복잡성을 증가시키게 된다.
- 성능 문제: 상위 컴포넌트에서 상태를 끌어올리면, 하위 컴포넌트에서 필요하지 않은 상태 업데이트가 발생할 수 있습니다. 이로 인해 성능 문제가 발생할 수 있다.
- 재사용성 감소: 상태를 끌어올리면 해당 상태를 사용하는 여러 하위 컴포넌트가 해당 상태에 의존하게 됩니다. 이로 인해 상위 컴포넌트의 재사용성이 감소한다.
- 코드 가독성 감소: 상태를 끌어올리면 컴포넌트 간에 데이터가 어디서 왔는지 추적하기 어려워질 수 있다.
상태 관리 라이브러리
‘상태 끌어올리기’의 한계를 극복하고자 여러 상태 관리 라이브러리들이 개발되었다. 이들 라이브러리는 상태 변경 로직을 컴포넌트 외부로 분리함으로써 컴포넌트의 재사용성을 높이고, 상태 변경에 따른 사이드 이펙트를 관리하는 기능을 제공한다.
상태 관리 라이브러리 종류와 선택 기준
사앹 관리 라이브러리에는 Redux, MobX, Zustand 등 다양한 라이브러리가 있다. 이 중에서 선택하는 기준은 다음과 같다.
- 학습 곡선: 라이브러리를 익히는 데 필요한 시간과 노력이다.
- 사용 편의성: 라이브러리를 사용하여 상태 관리를 하는 데 있어서의 편의성이다.
- 커뮤니티와 지원: 라이브러리에 대한 커뮤니티 활동 정도와 공식 지원을 받을 수 있는지 여부이다.
- 성능: 라이브러리의 성능과 최적화 기능이다.
Zustand의 도입
Zustand는 상태 관리 라이브러리 중 하나로, 작고 간단한 API를 가지고 있어 학습 곡선이 낮고 사용이 편리하다. Redux나 MobX와 같은 라이브러리에 비해 최소한의 추상화만 제공하므로, 필요한 기능만 선택해서 사용할 수 있다.
이 내용은 상태 관리에 대한 기본적인 이해를 바탕으로 작성되었다. Zustand를 활용한 자동 로그인 기능 구현 등, 좀 더 심화된 주제에 대한 내용은 다음 글에서 다루도록 할 것이다.