들어가기 전에

리액트와 리덕스 수업에 의존하고 있습니다.

리액트와 리덕스 기술이 익숙하지 않다면  먼저 공부하고 난 후에 이수업에 참여하실 것을 권해드립니다.

학습목표

 리액트와 리덕스만 장점을 가진 시스템을 만들 수 있습니다.

핵심단어

• React
• Redux
• React-Redux

강의 듣기

리액트는 사용자 정의 태그 즉 컴포넌트를 만들어서 체계적이고 잘 정돈된 애플리케이션을 만들게 해주는 기술,

리덕스는 상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은 대로 변형되는 가능성을 낮춰주는 기술입니다.

즉 리액트나 리덕스는 개발의 복잡성을 낮춰주는 기술입니다.

위 그림에서 왼쪽은 리액트만으로 애플리케이션을 구현 했을 때 데이터의 흐름이고,

오른쪽은 리덕스 를 도입했을 때에 데이터의 흐름 입니다.

React

리액트는 "소문"으로 비유할 수 있고, 리덕스는 "미디어" 로 비유할 수 있습니다. 

리액트는 컴퍼넌트들로 만들어진 사회와 비슷해서 어떤 컴퍼넌트에서 변화가 생기면 모든 컴퍼넌트들로 그 데이터가 전파됩니다.

그 데이터가 필요한 컴포넌트는 그걸 이용하면 되고 필요없는 컴퍼넌트는 이용하지 않으면 됩니다.

그런데 소문은 모든 사람이 필요 없는 소문을 듣게 된다는 단점이 있습니다.

render() 함수가 호출됨으로써 퍼포먼스가 떨어지게 되는 것이죠.

마치 리액트에 있는 이 컴퍼넌트들이 서로 props 와 또 event를 매개로 해서 연결되어 있는 것처럼 

소문이 전파되기 위해서는 집집마다 연결이 되어 있어야 합니다.

굉장히 복잡한 애플리케이션이라면 국가처럼 복잡한 시스템이고 소문만으로 동작하기 어렵습니다.

이때 활용할 수 있는 도구가 국가의 언로사 역할을 하는 리덕스입니다.

Redux

모든 정보는 리덕스가 가지고 있습니다.

어떤 컴퍼넌트가 구성원들에게 전달하고 싶은 정보가 있으면 소문에 퍼트리는 대신에 리덕스라는 언론사에 제보합니다.

그러면 리덕스는 전체 컴퍼넌트들에게 방송을 합니다. 

하지만 여전히 방송은 필요하지 않은 사람에게도 소식이 전달된다는 비효율성을 가지고 있습니다.

React-Redux

리액트와 리덕스를 연결해주는 라이브러리인 "React-Redux" 를 사용하면

그 소식이 필요한 컴퍼넌트들에게만 정보를 전달할 수 있습니다. 즉 그 컴퍼넌트들만 render() 함수가 실행되는 것입니다. 

지금부터 우리는 소문으로만 동작하는 리액트 컴퍼넌트들의 사회에 리덕스라는 언론사를 세울 것입니다.

이 것을 쉽게 해줄 수 있는 도구가 바로  React-Redux입니다.

이 도구를 이용하면 애플리케이션의 복잡성을 획기적으로 낮출 수 있습니다.

또한 아주 적은 노력으로 리액트와 리덕스를 연동할 수 있고

리덕스 가지고 있는 시간여행 도구인 "Hot Reload" 와 같은 도구들도 사용할수 있게 됩니다 .

생각해보기

 React와 Redux, React-Redux의 정의를 설명해보세요.