해당 글은 redux sprint review 에 참여하여 배운 것들, 스스로에게 던지는 질문 등등을 정리하려고 따로 만든 문서이다. redux 의 공식문서를 읽고 공부하는 과정이 상당히 길어져서 부득이하게 새로 만들게 되었다.

아마 redux(4) 또한 작성할 할 예정이다. 그 포스팅은 redux 스프린트를 스스로 구현해 보고 그 과정들을 기록하는 문서가 될 예정이다.

추가로 오늘의 TIL 분량이 적은데, 그 이유는 오늘의 시간마저도 redux(2) 에다가 대부분 할애했기 때문이다. 그리고 오늘도 Redux 사이트의 튜토리얼을 이해하지 못 해 내일도 마저 진행해야 할 듯 하다.

Sprint Review

Why use Redux?

React 의 class component 와 props drilling 만을 가지고 state 를 관리한다면 부모컴포넌트를 통한 nested structure 가 필수불가결하다. Redux 는 그런 props drilling 을 거치지 않고도 별도의 store 를 만듦으로서 nested structure 를 탈피할 수 있게 해준다.

또한 App 의 전반적인 component 에서 사용하는 값의 경우, React 만을 사용한다면 props drilling 을 여러 곳으로 뚫어줘야 하는데, 이런 경우도 마찬가지이다.

dark mode 구현 등이 대표적인 redux 가 있으면 좋은 예시일텐데, isDarkMode 와도 같은 state 를 대부분의 component 들이 주고받아야 한다. redux 를 통해서는 하나의 store 를 전역적으로 두고 사용함으로써 props drilling 을 피할 수 있다.

props drilling - Google Search

How Redux works?

일단은 action 생산자가 이벤트를 감지하고, 그 이벤트에 맞는 action 을 만든다. 그리고 그 action 은 reducer 함수로 넘어가고, reducer 함수는 기존 state 와 action 을 합쳐서 새로운 state 를 return 해준다. "새로운" state, 즉 immutability 를 보장하는 것이다.

그 외 나온 질문, 그리고 여담

• Obejct.assign(target, arg1, arg2...) method 은 무엇인가? : 첫 번째 인자인 Target 인자에, 그 나머지의 인자로 들어오는 객체들의 속성들을 복사해넣는 메서드이다. Redux 에서는 store 의 불변성을 보장하기 위해 사용한다.

  • 어떤 값이 return 되는가? : 나머지 인자들의 속성들이 복사된 target 이 return 된다
  • 첫 번째 인자인 target 에 빈 객체를 넘겨주는 이유는 무엇인가? : state 의 immutablity 를 유지하기 위해서이다. 기존 state 를 건드리지 않고, state 를 복사한 새로운 객체를 사용하기 위한 밑작업이라고 보면 된다.
  • redux 에서 해당 메서드를 통해 관리하는데, 왜 두 번째 인자로 state 를 넘겨주는가? : 위에 말했던 것처럼 첫 번째 인자 target 에 빈 객체를 넘겨주고, 그리고 state 의 내용들을 불러오기 위해서이다.
  • 그러면 그 다음에 날아오는 action 을 넣어주면 된다. 그러면 previous state + action 이 blend 되고, 그것들을 return 해 줌으로써 immutability 가 유지되는 state handling 을 할 수 있게 된다.
  • Redux 는 깊은 복사가 되지 않아도 상관없다

• 아키텍쳐 공부는 주니어 개발자의 다음 상태로 넘어가는 관문

  • 아키텍처란? : "시스템 목적을 달성하기위해 시스템의 상호작용등의 시스템디자인에 대한 제약 및 설계" 이다. 혹은, "최적화를 목표로 두고 시스템 구성과 동작원리 그리고 시스템의 구성환경등을 설명 및 설계하는 청사진 또는 설계도" 이기도 하다. 예를 들면 디자인패턴 등이 있다.
  • 우리의 Redux 레퍼런스 코드도 상태에 따라 reducer 들을 적절히 분기한 뒤, 그것들을 combineReducer() 등을 활용하여 넘겨주는 구조를 따르고 있다. reducer composition 이 대표적인 패턴, 즉 "괜찮은 아키텍처" 중에 하나 이다.

• 비동기 Redux 관련해서는, 해당 슬라이드를 참고하고 공부하자.

Redux Architecture

• general 의 sprint feedback 에 보강을 원하는 사람들은 "레퍼런스 코드의 무슨 파일, 몇 번째 줄을 모르겠다!" 라는 구체적인 질문을 통해 물어봤으면 좋겠다. 진짜로 모르는 건지, 아니면 엄살을 부리는 건지(?) 를 확인해 봐야겠다.