Redux(1) - 개요

what is Redux

자식으로부터 부모에게 state를 끌어올리고 다른 자식에게 state를 부여하는 것은 react의 기본적인 구현 방식입니다. 하지만 state가 한 두개가 아니라 10개, 20개 이상이라면? state를 관리하고 디버깅하는 것은 어려워 질 것입니다.

그래서 component의 state를 다른 파일로 분리시켜서 효율적으로 상태를 관리하게 해주는 라이브러리가 Redux입니다.

개요

출처 : https://xn--xy1bk56a.run/react-master/lecture/rd-redux.html

일반적적인 props 전달은 마치 트리 구조처럼 props를 가진 자식의 정보가 부모까지 올라가서 다시 해당 자식 까지 내려가는 불편한 구조를 가지게 됩니다.

반면에 Redux는 store에 기능(액션)을 둔 다음에 바로 원하는 컴포넌트에 직접적으로 전달해줄 수 있습니다.

Redux의 가장 중요한 3가지 원칙은 다음과 같습니다.

1. state는 한 곳에서 집중적으로 관리됩니다.

redux 자체가 state를 기능별로 저장하여 뿌려주기 위한 라이브러리이기 때문에 한 곳에서 객체 형식으로 작성되어 저장되게 됩니다.(다른 곳에서 작성할 필요가 없는 것입니다.)

2. state는 읽기 전용입니다.

state는 네트워크 콜백과 같은 일반적인 방법으로는 변경되지 않습니다.
state를 변경하기 위해서는 action이라는 특별한 명령이 필요합니다.
그리고 action을 통해서 다양한 기능을 구현할 수 있습니다.

3. state를 변경하기 위해서는 순수 함수여야 한다.

state를 변경할 때 이전 state와 action을 인자로 받아서 새로운 상태를 리턴해주는 reducer가 필요합니다. 따라서 외부의 인자에 영향이 받지 않고 순수하게 이전 상태를 받아 새로운 상태를 리턴해줘야 합니다.