[항해 18일차] TIL_React 숙련주차 : Redux 란?

리덕스가 필요로 하는 이유

useState 의 불편함

어떤 컴포넌트에서 생성한 state 를 다른 컴포넌트로 보고자 할 때 Props 를 통해 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었습니다. 근데 Props 로 State 를 공유하는 방법에는 불편한 점이 있습니다.

   1. 컴포넌트에서 컴포넌트로 State 를 보내기 위해서는 반드시 부-모 관계가 되어야 합니다.

   2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모 컴포넌트를 거쳐야만 합니다. 즉, 정작 부모 컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미합니다.(조부모 → 부모 → 손자)

   3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없습니다.

이러한 불편함을 겪지 않기 위해 새로운 도구가 바로 '리덕스' 입니다. 리덕스를 사용하면, State 를 공유하고자 할 때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 됩니다. 그리고 자식 컴포넌트에서 만든 State 를 부모 컴포넌트에서도 사용할 수 있게 됩니다.

 

Global state 와 Local state

앞으로 State 를 Global state 와 Local state 라는 것을 따로 구분지어서 표현할 것입니다.

• Local state (지역상태) 란?
  • 컴포넌트에서 useState를 이용해서 생성한 state 입니다. 좁은 범위 안에서 생성된 State 라고 생각하시면 됩니다.
• Global state (전역상태)란?
  • Global state는 컴포넌트에서 생성되지 않습니다. 중앙화 된 특별한 곳에서 State들이 생성됩니다. 좀 더 쉽게 얘기해서 “중앙 state 관리소” 라고 생각하면 됩니다.

중앙 State 관리소에서 State 를 생성하고, 만약 어떤 컴포넌트에서 State 가 필요하다면, 컴포넌트가 어디에 위치하고 있든 상관없이 State 를 불러와서 사용할 수 있게 됩니다. 이렇게 특정 컴포넌트에 종속되어 있는 것이 아니라 "중앙 state 관리소" 에서 생성된 State 를 Global state 라고 합니다. 그리고 이러한 값들을 관리하는 것을 "전역 상태 관리" 라고 합니다.

 

리덕스란?

리덕스의 정의

리덕스란, 위에서 말한 "중앙 state 관리소" 를 사용할 수 있게 도와주는 패키지(라이브러리)입니다. "중앙 state 관리소" 를 통해서 State 를 관리한다는 아이디어는 굉장히 좋으나, 그것을 직접 구현하기는 어려우니 패키지(라이브러리)의 도움을 받아 구현해보고자 합니다.

프론트엔드 개발자들은 "리덕스" 를 전역 상태관리 라이브러리 라고 많이 표현합니다. 전역 상태, 즉 Global State 를 의미하고, 그것을 관리하게 도와주는 라이브러리(패키지)이기 때문입니다.

 

정리해서,

리덕스는 전역상태 관리 라이브러리입니다.

리덕스는 useState 를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소시켜줍니다.

리덕스는 중앙 State 관리소를 갖고 있으며, 모든 State 는 이곳에서 생성됩니다.

useState 로 생성한 State 는 Local State이고, 리덕스에서 생성한 State는 Global State 입니다.