2020.05.29 금요일

오늘 한 일

• 오늘은 이제까지 만든 react 프로젝트를 기반으로 redux를 추가하며 redux에 대해서 공부했다. 
• react는 state를 컴포넌트 안에서 관리하므로 부모에서 자식으로 state를 내려줄 필요가 있다. 
  • 이때 state를 주고받는 과정에서 많은 컴포넌트를 지나야 하는 경우 코드가 복잡해지는 문제가 발생한다. 
  • 위 문제를 해결하기 위해서 redux를 사용한다. 
• redux의 세가지 원칙
  • Single Source of truth
  • State is read only
  • Changes are made with pure functions 
    • 순수 함수란 함수에 입력으로 같은 값이 들어가면 항상 같은 값만 반환하는 함수를 의미한다.
    • Date.now()나 Math.ramdom() 같은 함수는 입력값이 같아도 실행되는 시점에서 다른 값을 반환하므로 순수 함수가 아니다 
• redux의 장점
  • state의 다음 상태 예측 가능
  • 유지보수가 용이
  • 디버깅이 유리
  • 테스트를 붙이기 쉽다. 
• redux
  • 액션
    • 앱에서 스토어로 보내는 데이터의 묶음을 의미
    • 스토어의 유일한 정보원
  • 리듀서
    • Array.prototype.reducer와 비슷한 기능
    • 이전 상태와 액션을 받아 다음 상태를 반환
    • 순수함수
    • Object.assign()을 사용하여 다음 상태를 만듦, 이전 상태로 들어오는 값을 변경하지 X
  • 스토어
    • 앱의 상태를 저장
    • getState()를 통해 상태 접근
    • dispatch(action)을 통해 상태 수정
    • subscribe(listener)를 통해 리스너 등록
• container
  • 프레젠테이션 컴포넌트; 어떻게 보이는가?
  • 컨테이너 컴포넌트; 어떻게 작동하는가? 
    • react-redux모듈의 connect를 통해 컨테이너 컴포넌트에서 프레젠테이션 컴포넌트 연결, 지정된 정보를 넘겨주거나 동작을 제어
  • 링크