Sprint 10 - Redux

dlrbwls0302·2021년 2월 22일
0

Achievement Goals

  • 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
  • Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
  • Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
  • Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
  • Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

Redux

1. 리덕스란?

리덕스는 가장 많이 사용되는 리액트 상태 관리 라이브러리이다. 우리가 상태(state)를 관리할 때는 this.state 객체를 써서 각 컴포넌트 내에서 필요한 상태들을 관리해왔다. 하지만 리덕스로 인해 상태를 컴포넌트에서 분리해 다른 파일에서 관리해 줌으로써 더욱 효율적으로 상태를 관리할 수 있게 되었다. 또한 컴포넌트끼리 똑같은 상태를 공유할 땐 그 컴포넌트들을 자식으로 갖는 부모 컴포넌트에서 상태를 관리했고, 필요할 때마다 props로 상태를 넘겨주었다. 하지만 이제는 그럴필요 없이 리덕스로 관리해 주면된다.

2. 리덕스의 3가지 원칙

1) Single source of truth(신뢰할 수 있는 단일 출처): 데이터 무결성을 위해 동일한 데이터는 항상 같은 출처에서 가져오는 것이 좋다. 리덕스에서는 데이터를 관리하는 하나의 출처, store라는 것이 존재한다.

2) State is read-only: 클래스 형 컴포넌트에서도 state를 변경할 때 직접적으로 값을 대입하는 것이 아닌 this.setState 함수를 이용하였던것 처럼, 리덕스에서도 값을 변경할 때는 store가 가지고 있는 값에 직접적으로 접근하는 것이 아니라 어떤 action 객체를 발생시켜 dispatch 메소드에 전달이 되고, 이게 다시 리듀서 함수로 보내지면 리듀서 함수에서 보내진 action에 맞게 store를 업데이트 시켜 store에 있는 값이 우리가 의도한 대로 변할 수 있게 하는 작업이 필요하다.

3) Changes are made with pure functions: 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수한 함수는 다음과 같은 조건을 만족한다.

  • 이전 상태액션 객체를 파라미터로 받는다.
  • 파라미터(이전 상태와 액션 객체) 외에는 어떠한 값에 의존해서는 안된다.
  • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
profile
오늘의 공부가 쌓여서 내일의 나를 만들어낸다.

0개의 댓글