[React & Redux] React & Redux

0. React & Redux

• 생활코딩 강좌를 듣고 정리한 내용입니다.
• React는 사용자 정의 태그, 즉 컴포넌트를 만들어서 체계적이고 잘 정돈된 어플리케이션을 만들어주는 기술이다.
• Redux는 상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은 대로 변형될 가능성을 낮춰주는 기술이다.
• 즉, React 건 Redux건 모두 개발에 복잡성을 낮춰주는 기술이라고 할 수 있다.
• 비유를 해보면 다음과 같다.

• 왼쪽은 react만으로 구현한 데이터의 흐름이고 오른쪽은 redux를 도입한 후 데이터의 흐름이다.
• react는 소문과 같고 redux는 미디어 같은 느낌이다.
• react는 컴포넌트들로 만들어진 사회와 비슷하고 어떤 컴포넌트에서 변화가 생기면 왼쪽에 있는 그림처럼 모든 컴포넌트들로 그 데이터가 전파된다.
• 그 데이터가 필요한 컴포넌트는 그것을 이용하고 필요없으면 이용하지 않으면 된다. 그러나 소문은 단점이 있다. 모든 사람이 필요없는 소문을 듣게 된다는 것이다. react로 치자면 render함수가 호출되어서 효율이 떨어지는 것이다. 또 소문이 전파되기 위해선 서로 연결이 되어 있어야 한다. props와 event로 연결되어 잇는 것처럼.
• 작은 동네는 소문으로 충분하지만 국가는 소문으로 충분하지 않다.
• 그럴때 우릴 구원해줄 수 있는 도구가 redux이다.
• 모든 정보는 redux가 가지고 있다. 어떤 컴포넌트가 구성원들에게 전달하고 싶은 정보가 있으면 소문에 퍼뜨리는 대신 redux라는 언론사에 제보를 하고 그럼 redux는 전체 컴포넌트들에게 방송을 한다.
• 전체에게 하고 싶은 말이 있으면 redux의 store에 제보를 하면 된다.
• 방송은 그게 필요하지 않은 사람에게도 전달되는 비효율성은 여전히 가지고 있다.
• react와 redux를 연결해주는 라이브러리인 react-redux를 사용하면 그 소식이 필요한 컴포넌트들에게만 그 정보를 전달할 수 있다.
• 다시 말해 그 컴포넌트들만 render함수가 실행되는 것이다.
• redux의 효율성을 알기 위해 redux없는 react component와 redux를 도입한 react component를 살펴보겠다.