[React] 상태 관리

전역 상태 관리

프론트엔드 개발에서의 Side Effect

Side Effect란?

함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인

 

대표적인 예: 네트워크 요청 (백엔드 API 요청)

 

-> Side Effect를 최대한 배제하고 컴포넌트를 만들어야 한다.

 

상태의 두 가지 구분

로컬 : 특정 컴포넌트 안에서만 관리되는 상태

전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

 

전역 상태에서의 데이터 무결성

데이터 무결성이란?

데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것

 

-> Single source of truth : 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

 

상태 관리를 위한 각종 툴

상태 관리 툴은 보통 어떤 문제를 해결해주나?

• 전역 상태 저장소 제공
• Props drilling 이슈 해결

 

Props drilling

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다.

 

Props Drilling의 문제점

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않는다.

하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다.

• 코드의 가독성이 매우 나빠지게 된다.
• 코드의 유지보수 또한 힘들어지게 된다.
• state 변경 시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. 따라서, 웹 성능에 악영향을 줄 수 있다.

해결 방법

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다.

 

Redux

Redux의 구조

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 한다.

createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있다.

 

Reducer

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수이다.

이때, Reducer는 순수함수여야 한다. 

 

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체이다.

보통 Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.

이러한 함수를 액션 생성자라고도 한다.

 

Dispatch

Dispatch는 Reducer로 Action을 전달해 주는 함수이다. Dispatch의 전달인자로 Action 객체가 전달된다.

Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출한다.

 

Redux Hooks

useDispatch()

useDispatch()는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드이다.

 

useSelector()

useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드이다.

 

Redux의 세 가지 원칙

1. Single source of truth : Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙
2. State is read-only : Redux의 상태도 직접 변경할 수 없다. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙
3. Changes are made with pure functions : 변경은 순수함수로만 가능하다.