23/12/15 React - 상태 개념

 

 

 

23/12/15 React Study

 

 

 

 

Local State 

특정 컴포넌트 내에서만 관리되는 상태를 말하며 useState, 복잡하다면 userReducer를 사용하여 관리하는 것을 말한다.

 

Cross State

컴포넌트간 상태를 공유하는 것을 의미한다 예로 모달창이나 Input의 재사용성을 고려해서 컴포넌트로 구현하여 프롭드릴링을 통해 상태를 전달하여 동작하는 것을 말한다.

 

App Wild State

어플리케이션 전체를 뜻하며 모든 웹안에서 공유되어야하는 것을 의미한다. 

예로 사용자의 인증 상태, 장바구니 등 실시간이나 페이지 이동간에 가지고 있어야되는 정보 및 권한을 예로 들수 있으며

전 컴포넌트를 연결하게되면 무언가 하나를 수정하게되면 프롭드릴링하는 컴포넌트들은 전부 수정해야 하는 불상사가 생긴다. 이를 방지하기위해 전역 상태관리 useContext 공급자를 사용하여 트리형태의 정보공유를 하고

이를 더 편하게 사용하기위해 Redux라는 라이브러리가 존재한다.

 

 

 

 

useContext보다 React-Redux?

 

Redux는 전역상태 라이브러리 이며  useContext는 공급자를 통한 트리형태의 전역상태 관리 hook 이다.

비슷하면서 다르게 작용하는데 

 

useContext의 경우 트리형태로 provider 컴포넌트로 감싸 적용해야 useContext를 통해  하위 컴포넌트 들이 상태를 공유하는데 만일 대형 프로젝트의 경우 권한별로 사용자에게 보여져야할 메세지나 ui가 다르다면 다수의 provider컴포넌트로 감싸게되어 복잡한 로직이 형성될수있다. 

 

Redux는 독립적으로 전역상태 관리하기 때문에 useReducer의 local State의 개념을 전역으로 확장한다고  생각하면 편할것이다. 이는 공유 상태를 일관성으로 유지하고 복잡한 로직을 좀더 편하게 구현이 가능한 라이브러리이다.

매우 편하지만 프로젝트 규모가 대형이 아닌 소형이라면 useContext만 사용해도 문제 없을 것이다. 

 

useContext 보다 Redux가 맞다! 라는 말보다 Redux로 사용자 인증, 권한을 전역관리하여 useContext를 혼용 사용하여

사용자 권한에 맞는 정보를 제공할수 있다.

 

Redux는 useContext의 전역상태관리 훅의 대안이고 활용성이 뛰어난 라이브러리지만,

각각 케이스와 복잡성에 차이가 있다.

 

 

 

Redux 

Redux는 app의 중앙 저장 데이터라고 말한다. 

2개는 가질 수 없고 절대적으로 하나만 가질 수 있으며 독립적인 저장소이다.

 

Redux의 생명주기는 다음과 같다.

 

1. 전역상태 관리 스토어 생성

2. App에 이벤트가 발생되면 발생된 이벤트(action)를 변경(dispath) 

3. 리듀서로  변경(dispath)된 객체를 state에 반영 - ***불변성 유지를 위해 새로운 객체를 반환해야함

4. State 업데이트하여 스토어 업데이트

5. 구독은 스토어 변경을 감지하고 구독자에게 알리며 재 랜더링

 

 

허나 React에서 React-redux 라이브러리를 설치했다고 하면 구독은 필요가 없어진다.

redux를 사용하는 페이지에서 useSelector, useDispath 를 쓰면 자동으로 구독상태가 되어상태 변경시에 자동 랜더링이 되기 때문이다.

 

 

1. useSelect Hook : redux의 스토어 전체나 스토어의 특정부분만 구독함

예 ) useSelector(state => state.foo)

 

2. useDispatch Hook : 해당 훅을 이용하여 액션에 dispath 한다. 

 

 

음...이렇게 말고 redux는 제대로 포스팅을 해야겠다..