Redux- 리덕스 총정리하기

Redux- 리덕스 총정리하기

> What is Redux?

:redux는 flux 아키텍쳐를 편하게 사용할 수 있는 라이브러리입니다.

ㅣflux 아키텍쳐를 한눈에 보여주는그림 -velopert님 블로그 참조

> Why we use Redux?

:일단 react에서 데이터관리를 할때 redux 를 많이 씁니다.

Q) 리덕스를 쓰지않고, 리액트 컴포넌트끼리 직접 데이터를 교류하면 되지 않나요?

A)컴포넌트끼리 직접 데이터를 교류할 순 있지만, 코드의 규모가 커지면 구조가 정말 복잡해지고, 잘못하다간 스파게티 코드가 만들어 질 수 있습니다.

ㅣ스파게티 코드 -velopert님 블로그 참조

Q)리액트는 단방향 parent-child 구조를 사용하는 것으로 아는데, 그 구조를 사용해 데이터를 교류하면 되지 않을까요?

A) 컴포넌트 끼리 직접교류하는 스파게티 코드 보다는 덜 복잡하지만, 여전히 코드가 복잡해집니다.

ㅣ단방향 데이터교류 -velopert님 블로그 참조

Solution: 리덕스를 사용하자!

: store 에서 모든 데이터를 담고 있고, 컴포넌트끼리는 직접교류하지 않으며, store가 중간 다리 역할을 하게 됩니다!

빨간 화살표는 컴포넌트에서 dispatch를 통해 데이터를 업데이트 하는것을 나타내며,

주황 화살표는 컴포넌트에서 store에서 데이터 변동이 있을시 컴포넌트에 반영시키는 것을 나타냅니다.

ㅣ리덕스 구조 -velopert님 블로그 참조

> Redux의 3가지 원칙

1.Single source of truth

• 단 한개의 store사용
• 모든 state가 하나의 state안에 되어있음.
• nested구조를 띄기도 함.

2.State is read-only

• 어플리케이션에서 state를 직접 변경 할 수 없다.
  
• state를 변경하기 위해서는 (여기서 말하는 state는 redux의 state이다.) action이 dispath 되어야 한다.
• action이란 어떤 변화가 일어나야 할지 알려주는 객체이다.

리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 합니다. 

리덕스에서도 마찬가지입니다. 기존의 상태는 건드리지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있습니다.

리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문입니다. 이를 통하여 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비교를 하여 좋은 성능을 유지할 수 있는 것이죠.

3. Changes are made with Pure Functions

• action을 dispatch해서 state를 변경하는데 action객체를 처리하는 함수가 reducer이다.
  
• 여기서 이 reducer는 순수함수로 작성되어야 한다.

• new Date() 를 사용한다던지… 랜덤 숫자를 생성

  한다던지… 혹은, 네트워크에 요청을 한다던지! 그러한 작업은 결코 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리해줘야 합니다. 그런것을 하기 위해서, 리덕스 미들웨어 를 사용하곤 하죠.

| 순수함수?

1. 같은 인수로 실행된 함수는 언제나 같은 결과를 반환
2. return값은 오직 parameter 값에만 의존
3. 인수는 변경되면 x
4. 순수하지 않은 api호출 x (date 및 math 함수)

| action?

• 어떤 변화가 일어나야 할지 알려주는 객체

| reducer?

• action을 받아, 애플리케이션 상태를 어떻게 바꿀지 정의함.