beomy

아래 그림과 같이 입력한 숫자를 더하는 counter을 redux를 사용하지 않고, redux를 사용하여, redux + react-redux를 사용하여 구현 한 3가지 코드를 비교하여 설명하겠습니다. create-react-app로 생성된 프로젝트로 진행 합니다. ([React.JS] CodePen, create-react-app으로 React.JS 개발하기 참고) 1. redux를 사용하지 않은 예제 Redux나 그 외의 모듈을 사용하지 않고, 순수 React만 사용하여 구현한 예제입니다. 컴포넌트 구조 컴포넌트 구조와, state 흐름은 아래 그림과 같습니다. Counter 컴포넌트는 계산된 값을 화면에 나타내는 컴포넌트 입니다. Option 컴포넌트는 계산할 값을 입력받는 컴포넌트 입니다. But..

Redux는 데이터를 효율적으로 관리 할 수 있게 해주는 아키텍쳐 입니다. 프로젝트의 규모가 커질 수록, 데이터가 복잡해 지는 자바스크립트 싱글 페이지 어플리케이션(Single Page Application)에서 매우 유용하게 사용 됩니다. Redux 공식 문서에는 Redux는 React 외에 다른 View 라이브러리와 함께 사용될 수 있다고 설명하고 있습니다. 저희는 React에 Redux를 적용해 보겠습니다. 1. Redux의 Data Flow 규모가 큰 프로젝트에서 Redux의 Data Flow는 코드를 명료하게 만드는 큰 장점을 가지고 있습니다. 스파게티 코드의 Data Flow 위와 같이 컴포넌트가 구성되어 있을 때, 주황색 컴포넌트의 state가 파란색 컴포넌트와 초록색 검포넌트에 전달되어야 ..