상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.

Answer

• props를 아래 컴포넌트에 내려줄 때 driling 현상이 생기는데, React는 상태관리 라이브러리가 아니기 때문에 관리하기가 힘들다. 그래서 Redux를 이용해서 필요할 때마다 Store에 접근해서 값을 받아올 수 있다.

Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.

Answer

• +Button 을 누르면 상태가 업데이트 되는 로직이라고 가정했을 때
  • 클릭을 하면 액션 객체가 생긴다(type에서 어떠한 타입인지 명시해야하고, 얼마나 업데이트 해줄지에 대한 데이터를 payload에 담아줘야한다). 그리고 Dispatch 호출해서 Reduce에 Action 객체를 전달해준다.
  • Reduce는 Switch문을 통해서 Action 객체에 type이 뭔지 판단하고 그거에 따라서 다르게 처리한 후 새로운 상태를 만들게 된다.
  • 만들어진 새로운 상태는 Store에 업데이트 된다.
  • Store의 상태를 React가 다시 변화를 감지해서 읽어온다.
  • payload에 실은 값으로 업데이트 된다.

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

Answer

• Store

  • Single source of truth (단일진실공급의원칙)
    • 중요한 데이터라서 백업 파일도 있어야 하는 경우, 중복되는 데이터가 있거나 한 쪽에만 업데이트가 일어나게 되면 나머지는 업데이트가 안될 수도 있다. 데이터간의 싱크를 맞춰주는 것이 중요하다. 그래서 Redux에서는 항상 데이터는 이 단일공급원 하나의 Store에서만 가지고 온다라고 하는 것. 배운 개념에서 Store라는 전역상태관리객체랑 연결되는 내용이다. 모든 Redux와 관련된 상태를 Store에서만 가져올 수 있다. 복사본도 없다. 한곳에서만 관리한다.

• Action

  • State is read-only
    • State는 직접 수정을 할 수 없다. State를 고치기 위해서는 React 상에서 고치고 있는 것이 아니라 , Redux 흐름을 통해서 데이터를 건드리고 있는 것이다. 그래서 State is read-only 라는 게 우리는 state에 직접 수정을 하는 것이 아니라 Action 객체를 통해서 Reducer를 이용해 새로운 state를 생성해내는 방식으로 변경을 한다는 뜻이다. 컴포넌트에서는 state를 useSelector method를 이용해서 받아오기만 할 수 있고, 수정을 하려면 Action 객체에 어떤 작업을 할 지 내용을 담아서 useDispatch method 에 해당 객체를 전달을 해주고 , 그 Action 객체는 Reducer로 들어가서 새로운 State을 생성해내고, 그 State는 Store에 저장이 된다. Store에 변화가 있을 때마다 계속 Read-only로 그 컴포넌트는 상태를 읽어오기만 하는 것이다.

• Changes are made with pure functions

  • Reducer는 순수함수로 구성된다. 어떤 input값이 같다면 항상 output은 동일해야한다. 그래야지 불변성을 지킬 수 있다. State를 똑같이 직접 수정한다는 것이 아니라 기존의 State와 Action이 들어가면, 기존의 State의 주소값.. 같은 주소값이 아니라 아예 새로운 주소값을 가진 객체(state)를 만들어서 리턴하라는 말이다. 순수함수로 지정되야 하는 Reducer.. 순수함수의 조건은 동일한 인자값을 받으면 항상 동일한 리턴값을 반환하고, 그리고 어디서 호출되던지 동일한 결과를 보여준다. (외부의 영향을 받지 않고 주지도 않는다.)

• 기억해야할 점
  • 이 세가지를 기억해야지 독립성이 높아지고 side Effect를 방지할 수 있다.

Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.

Answer

• Presentational Component
  • 기능
    • 어떻게 보여지는가
  • Redux와 연관성
    • 없음
  • Read data
    • Props에서 data를 읽음
  • Change data
    • Props에서 콜백을 호출

• Container Component
  • 기능
    • 어떻게 동작하는가
  • Redux와 연관성
    • 있음
  • Read data
    • Redux의 state에 접근 (useSelector)
  • Change data
    • Redux Action

Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

Answer

• useSelector
  • Store가 가지고 있는 state을 연결해주는 메소드 -> Component와 state의 연결을 돕는다
    • Component -----> useSelector -------> state

• useDispatch
  • Action 객체를 Reducer에 전달해주는 메소드
    • Action ------> useDispatch -------> Reducer