리액트는 1개의 html에 component를 레고처럼 만들어 채우는 방식으로 페이지를 구성하고 있는데 이경우 html에서의 데이터(=state)를 컴포넌트에서 쓰고싶다고 해서 바로 컴포넌트들이 가지고 갈수있는것이 아니라 "props" 라는 것을 이용해서 컴포넌트들이 state를 내려받을수있다.또 리액트는 상위에서 하위로 상태값을 전달하여 상태를 관리하게 되어있는데 컴포넌트가 분리되어 점점 더 많아지는 상황에서 상태를 관리하게 위해서는 결국 props를 통해 수많은 컴포넌트들을 통과해 사용하는 하위까지 값을 전달해야 한다.
실제로 하위 컴포넌트에서 state를 사용하기위해 불필요한 props를 중간 컴포넌트들이 전달하는 용도로만 줄줄이 전달받아야 하는 상황 props drilling이 발생한다.
prop drilling이 2~3번만 일어나도 이미 state관리가 꽤나 지저분해진 상태가 되고 불필요한 re-rendering으로 인해 성능상의 이슈도 많이 발생하고 prop 전달이 10개, 15개 그 이상으로 더 많은 과정을 거치게 된다면 코드를 읽을 때 해당 prop을 추적하기 힘들어진다. 결국 이로 인해 유지보수도 더욱 어려워지게 된다.
그래서 전역상태 관리란 말하는바 그대로 전역에서 상태를 관리한다는 의미인데 ( props문법 귀찮을때, state 변경관리하기위해) 이를 위한 하나의 방법으로 전역상태관리 라이브러리를 사용한다.
전역 상태관리 라이브러리 (Redux, Mobx,Recoil,Overmind.js,...)
1. Redux 를 쓰는이유
- props를 안써도된다: 우리는 state를 보관하는 파일을 하나 만들고(js파일) 여기에 데이터를 보관하고 이정보를 원하는 컴포넌트들은 store에서 직접 state를 꺼내 쓸수있다. 쉽게 정보를 원하는 컴포넌트에서 useSelector 함수를 써서 state를 가져다 쓸수있음.->코드가 간결해진다.
- 상태관리가 용이하다 : state를 리덕스에서 관리한다고 해도 수많은 컴포넌트들에서 그 state를 받아다가 직접 state를 변경하는 다 다른 작동을 한다고 생각하면, 나중에 오류가생긴다면 그 문제가 어떤 컴포넌트에서 생겼는지 찾는데 시간이 너무 오래걸린다( 컴포넌트들이 100개나 된다고 생각해보자...). 그럴때 마찬가지로 리덕스에서 각각의 컴포넌트들이 사용했던 변경방법을 리듀서에 미리 다 집어넣어 놓는다면 각각의 컴포넌트들은 직접 state를 수정하지않고 수정(변경) 요청(dispatch를 쓴다)만 리덕스에 보낼수있어서 수정요청을받은 리덕스는 state수정만하면되게 코드를 짜놓으면 되는것이다.그렇다면 에러가났을때 state를 수정을해주는 부분은 리덕스 뿐이니까 범인은 리덕스라고 쉽게 알아낼수있다
나머지 라이브러리들도 리덕스와 똑같은 기능을 제공하기때문에 각각의 장단점을 한번 살펴보고 더 사용하기 편할것같은 것이나 프로젝트에 잘 맞는것으로 골라쓰면된다.
+) 리덕스의 사용방법은 Docs 를 살펴보면 자세히 잘 나와있다.
Credit :https://velog.io/@4_21ee/TIL-32-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC
