상태 관리의 기초: 프론트엔드 웹 개발에서의 상태 이해

프로그래밍/소프트웨어 개발

웹 개발

대상자: 웹 개발자, 프론트엔드 개발자, 상태 관리에 관심 있는 초보자

핵심 요약

• 전역 상태(global state)는 애플리케이션 전체에서 접근 가능한 상태이며, 로컬 상태(local state)는 특정 컴포넌트나 파일 내에서만 사용된다.
• 유도 상태(derived state)는 다른 상태를 기반으로 계산된 상태로, const나 computed를 사용하여 생성하는 것이 성능에 유리하다.
• 반응형 상태(reactive state)는 상태 변경 시 자동으로 효과를 트리거하는 특성을 가지며, React: useState, Vue: ref, Angular: signal 등 프레임워크별로 제공된다.

섹션별 세부 요약

1. 상태의 정의 및 분류

• 상태는 애플리케이션 내에서 데이터를 저장하는 변수들이다.
• 전역 상태는 애플리케이션 전체에서 접근 가능하며, 로컬 상태는 선언된 파일이나 컴포넌트 내에서만 사용된다.
• 유도 상태는 다른 상태를 기반으로 계산된 상태이며, 예시로 displayName이 있다.

2. 반응형 상태와 프레임워크별 구현

• 반응형 상태는 상태 변경 시 자동으로 효과를 실행하는 기능을 제공한다.
• React는 useState를 사용하여 상태를 생성하고, Vue는 ref와 computed를 사용하며, Angular는 signal과 computed signals를 사용한다.
• 각 프레임워크는 상태 변경 시 효과를 트리거하는 메커니즘을 제공한다.

3. 상태 관리의 성능 고려

• 유도 상태는 가능한 한 하위 성능의 상태 도구를 사용하는 것이 좋다.
• React에서는 const를 사용하여 유도 상태를 생성하는 것이 성능에 유리하다.
• Vue와 Angular에서는 computed()를 사용하여 유도 상태를 관리한다.

4. 상태 전달 및 복잡한 애플리케이션에서의 상태 관리

• 상태를 자식 컴포넌트에 전달하는 경우 prop-drilling 문제가 발생할 수 있다.
• 의존성 주입(dependency injection)은 중간 솔루션으로, 부모 컴포넌트가 상태를 제공하고 자식 컴포넌트가 이를 소비하는 방식이다.
• Vue는 provide와 inject를 사용하고, Angular는 Dependency Injection을 제공한다.

5. 전역 상태 관리의 필요성 및 구현

• 여러 컴포넌트 간에 동일한 데이터를 공유해야 할 경우 전역 상태 관리가 필요하다.
• React에서는 Redux, Zustand, Vue에서는 Pinia, Angular에서는 ngRx가 사용된다.
• 전역 상태 관리는 일반적으로 store를 생성하여 상태를 저장하고, 상태 변경을 예측 가능한 방식으로 처리한다.

결론

• 상태를 관리할 때는 필요한 범위와 성능을 고려하여 로컬, 유도, 반응형, 전역 상태를 적절히 선택해야 한다.
• React는 useState, useContext를 사용하고, Vue는 ref, computed를 사용하며, Angular는 signal, computed signals, Dependency Injection을 사용한다.
• 반응형 상태는 상태 변경에 따른 효과를 자동으로 트리거하는 것이 핵심이며, 전역 상태 관리는 여러 컴포넌트 간 데이터 공유에 유리하다.