보통 react앱 내에서의 데이터의 흐름은 단방향으로, 위에서 아래로의 흐름을 가진다.
일반적으로는 VideoListEntry()안의 handleVideoListEntryTitleClick에서 트리거가 발생하면, app에 있는 currentVideo를 변경할 수 있게되며, 변경이 되면 life cycle을 통해 state에 영향을 받고있는 모든 컴포넌트들이 업데이트가 된다.
그런데 여기서, 만일 다수의 컴포넌트가 user정보를 필요로 한다면?
이 말은 즉슨 실제로 우리가 youtube 사용을 할때, 로그인을 할 때의 유저정보가 필요할 때를 말한다. app에는 user정보가 받아져있다.
예를들어 Nav라는 컴포넌트는 로그인된 000의 정보를 나타내고 싶어하고,
videoPlayer에는 영상을 재생중인 000의 정보를 필요로 하고,
videoList는 알고리즘 등에 의해 000이 필요로 하는 영상의 정보들이 필요할 것 이다.
일단은 기본적으로 user 정보를 갖고있는 app이 자식 컴포넌트에게 정보를 내려줄 것이다.
하지만 보통은 한 컴포넌트안에 수많은 컴포넌트들이 존재할꺼고, 이들을 일일이 찾아서 정보를 내려줘야 할 것이다.
-> 구조는 보통, 부모 컨포넌트가 본인의 state를 변경할수있는 setState등의 메소드들을 본인에게 binding시킨뒤, props라는 형태로 자식 컨포넌트들에게 전달하는 구조이다.
그러면 자식 컨포넌트들은 데이터를 lifting state up이라는 과정을 통해 다시 올려보내서,
부모 컨포넌트의 state를 변경한다. 근데 이를 위해, 불필요하게 props를 통해서, 이 handler 전달이 생기는 현상을 props drilling이라고 한다. 쉽게 말하면 프로퍼티 내려꽂기? 라고 한다고 한다.
불필요한 이유는, 하위 컨포넌트들로 정보를 내릴때, 중간에 정보를 원치않는 자식 컨포넌트에게도 정보를 무조건 전달해주기 때문이다.
위 문제를 어떻게 해결하면 좋을까?
컨포넌트들이 접근할 수 있는 공용 스토어가 있다면 어떨까?
스토어처럼 생각을 한다는건, 그 정보가 필요한 자식 컨포넌트만 스토어에 컨택을 해서 가져온다는 것처럼 생각을 한다는 것이다.
그렇다면, 이 스토어의 상태를 변경할 방법은 없을까?
이 스토어는 또 스토어 관리자(store dispatcher)가 별개로 있다.
하위 컨포넌트에서 정보를 필요로 할 시에 state를 이용해 컨택하는 것 처럼,
스토어는 이 dispatcher를 호출하여 스토어의 상태를 변경시키는 것 이라고 한다.
Redux 사용하기
- what is redux?
: 공식 문서에 있는 설명을 인용하자면,
redux는 JS 애플리케이션을 위한, 상태 컨테이너 입니다.
항상 일관되게 작동되며, 다양한 환경(클라이언트, 서버 및 일반)에서 실행이 가능하고,
테스트가 쉬운 애플리케이션을 작성하는데에 도움이 됩니다.
라고 설명되어있다.
- why we use redux?
: redux를 사용하면, 위에서 다룬 문제의 해결을 쉽게 해결할 수 있다.
👉redux의 세가지 원칙
- single source of truth.
- State is read-only.
- Changes are made with pure functions.
- definition
store
redux에서 사용하는 개념 중 하나,
'상태가 관리되는 오직 하나의 공간' 이다.
action
redux에서 사용하는 개념 중 하나,
simple javascript object. 즉 말 그대로 액션 발생 시 '대체'될 내용이 담긴, 순수 객체이다.
reducer
redux에서 사용하는 개념 중 하나,
현재 상태와 action을 이용해, 다음 상태를 만들어낸다. 콜백 필요없이 action을 보내기만 하면, reducer를 통해 다음 state를 만들어 내는 것이다.
- redux사용의 이점은?
- reducer로 다음상태가 어떨지 확인이 눈으로 가능하기때문에 상태의 예측이 가능하다.
- 부분적으로 유지보수가 가능하다.
- action과 state로그 기록을 하면 디버깅에 유리하다.
- 순수함수를 사용하기 떄문에 test를 붙이기 쉽다.
