상태관리에 관하여

프론트엔드 개발에서 상태관리를 보다 더 효율적으로 하기 위한 라이브러리인 Redux에 대해 공부하였다. 상태관리를 공부하면서 등장하는 다양한 개념들도 익혀두면 좋을 것 같다. 

 

프론트엔드 개발에서의 상태관리 

상태란 ?
UI에 동적으로 표현될 데이터 

상태를 다룰 때에 Side Effect는 주요 고려 대상임 

상태의 두가지 구분 

로컬	전역
특정 컴포넌트안에서만 관리되는 상태	프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 , 전역 상태일 필요는 없음 (출처가 달라도 됨)
그러나 
서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 함 


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

Single source of truth

동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 

전역상태 예시 
ex) 다크모드 기능 , 국제화 설정 

 

Props Drilling 이란 ?

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

Props Drilling의 문제점 

Props의 전달 횟수가 많지 않다면 문제가 되지 않지만 규모가 커지고 복잡해지며
props의 전달과정이 늘어난다면 문제가 발생함 

1. 코드 가독성이 나빠짐 
2. 코드 유지보수 힘들어짐 
3. state변경 시 props전달 과정에서 불필요하게 관여된 컴포넌트 또한 리렌더링 발생 , 웹성능 악화 
 
Props Drilling 해결 방법 

1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법
2. 상태관리 라이브러리를 사용하는 방법 
-> 전역으로 관리하는 저장소에서 직접 state를 꺼내 쓸 수 있게 됨