회고. 22.07.07

• 로컬 상태와 전역 상태의 차이점을 이해한다.

=> 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태

( 장바구니 페이지에서 cartItem 중 수량체크 인풋, 그게 컴포넌트 안에서만 영향을 주기 때문에 로컬의 예시 )

=> 전역상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 동시에 관리되는 상태

( 장바구니 페이지에서 cartItem 이 추가되거나 수량이 변경되면 금액이 변동된다. 이 금액은 여러 컴포넌트가 상태를 관리함. )

 

 

• 전역 상태의 필요성을 이해한다.

=> 전역상태를 남발하는 것은 좋지 않다. 하지만 다른 컴포넌트가 하나의 상태를 다룬다면 출처는 반드시 하나여야 한다. 

이를 전역공간으로 한다. 전역공간을 쓰지 않을 경우 공통의 부모 컴포넌트에서 props 를 사용하여 계속해서 내려줘야 하는데 이는 props drilling 이라고 한다. 또한 사본을 할 경우 이를 동기화 하는 과정도 필요한데 여기서부터 지옥의 시작이다..

( 추가로 동일한 데이터는 항상 같은 곳에서 데이터를 갖고 와야 한다. ( 데이터 무결성 = Single source of truth ) ) 

 

 

• 상태 관리 라이브러리의 필요성을 이해한다.

=> 상태 관리 라이브러리를 사용하지 않을 경우,, props drilling 에 빠진다.. 

오늘 사용한 redux 라이브러리를 사용하여 store 에 저장하고 reducer 를 통해 action 값에 변경을 주기만 하면 값이 업데이트가 됨

 

 

• Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.

=> action : 객체이며, type 을 필수로 지정해 주어야 한다. type을 통해 어떤 동작을 취할 지 명시해 주기 때문이다. 

또한 payload 는 선택사항인데 필요에 따라 구체적인 내용을 작성해 준다. 

 

=> Dispatch : Reducer 로 action 을 전달해주는 함수이다. 

만약 action 의 타입들을 함수의 형태로 작성이 되어 있다면 dispatch 의 인자로는 함수를 실행하는 형태로 줘야 한다.

그리고 action 함수의 인자값이 필요할 경우 action 함수의 인자값을 실행한 형태로 dispatch 함수에 인자로 넣어줘야 한다. 

 

Reducer : dispatch 에서 전달받은 action 객체를 type에 따라 상태를 변경시키는 함수이다. 

reducer 함수는 순수함수여야 한다. 

여러개의 reducer 함수를 사용할 경우 combineReducer 메서드를 사용해서 하나의 형태로 만들어 줄 수 있다. 

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
 }

 

 

• Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.

=> 1. Single source of truth

- 동일한 데이터는 동일한 곳에서 가져와야 한다. ( store 라는 하나뿐인 공간이 있음과 연결되는 원칙. )

 

2. State is read-only

- 상태는 읽기 전용이다. 상태를 직접 변경하면 안되고, action 객체가 있어야만 상태를 변경할 수 있다. 

 

3. Changes are made with pure functions

- 변경은 순수함수로만 가능하다. 상태가 의도하지 않은 값으로 출력되지 않도록 순수함수로 작성되어야 한다.