KBennyCC

React.js 01.16. 리덕스 미들웨어와 외부데이터 연동 웹 애플리케이션을 만들 때는 대부분 서버와 데이터를 연동해야한다. 데이터를 연동하려면 일반적으로 서버에 구현된 REST API에 Ajax를 요청하여 데이터를 가져오거나 입력해야한다.  01.16.1. 리덕스 미들웨어(middleware)란? 액션을 디스패치했을 때 리듀서 에서 이를 처리하기 전 에 사전에 지정된 작업 들을 실행한다.  (미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.) 미들웨어가 할 수 있는 작업은 여러 가지가 있다. 단순히 전달받은 액션을 콘솔에 기록할 수도 있고, 전달받은 액션 정보를 기반으로 액션을 취소해 버리거나 다른 종류의 액션을 추가로 디스패치할 수도 있다. 01.16.1.1. 미들웨어 생성 // src/lib/middlewareTest.js const middlewareTest = store => next => action => { // 현재 스토어 상태 값 기록 console.log( '현재 상태' , store.getState()); // 액션 기록 console.log( '액션' ,action); // 액션을 다음 미들웨어 또는 리듀서에 전달 const result = next(action) ; // 액션 처리 후 스토어의 상태를 기록 console.log( '다음 상태' , store.getState()); return result; // 여기에서 반환하는 값은 store.dispatch(ACTION_TYPE)했을 때 결과로 설정한다. } export default middlewareTest; // 내보내기 store 와 action 은 익숙하지만, next 는 익숙하지 않다. next는 store.dispatch 와 비슷한 역할이다. 차이점은

React.js 01.15. 리덕스를 편하게 사용하는 방법 리덕스를 사용하여 멀티 카운터를 만들면서 불편했던 점이 있다. 액션을 만들 때마다 세 가지 파일 ( 액션 타입, 액션 생성 함수, 리듀서)을 수정해야한다는 점, 전개 연산자(...) 와 slice 함수로 배열 내부의 아이템을 수정하는 데 가독성이 낮다는 점 등이다. 이런 불편한 점을 해결하여 리덕스를 사용하는 방법을 알아본다. Immutable.js 를 이용한 상태 업데이트 Ducks 파일 구조 redux-actions를 이용하여 액션 생성 함수 구현 01.15.1. Immutable.js Immutable.js 는 자바스크립트에서 불변성 데이터를 다룰 수 있게 도와준다. 01.15.1.1. 자바스크립트의 객체 불변성 객체 불변성을 이해하려면 간단한 자바스크립트 코드를 실행해 보아야한다. 크롬 웹 브라우저에서 개발자도구를 이용해 코드를 확인한다. let a = 7 ; let b = 7 ; let object1 = {a :1 , b :2 }; let object2 = {a :1 , b :2 }; a값과 b값은 같다. 둘을 === 연산자로 비교해보면 당연히 true를 반환할 것이다. 하지만 object1과 object2가 같은 값을 가지더라도 서로 다른 객체이기 때문에 둘을 비교하면 false를 반환한다. object1 === object2 // false let object3 = object1; object1 === object3 // true /* object3에 object1을 넣고 두 값을 비교하면 true를 반환한다. obejct1과 object3은 같은 객체를 가르키기 때문이다. */ object3.c = 3 ; object1 === object3 // true object1 // Object { a: 1, b: 2, c: 3 } 리액트 컴포넌트는 state

React.js 01.14. 리덕스를 이용한 리액트 애플리케이션 생성 리액트 애플리케이션에서 상태 관리를 할 때 소규모 프로젝트에서는 컴포넌트가 가진 state 기능을 사용하는 것으로 충분하지 모르지만, 규모가 커진다면 관리가 불편하다. 상태 관리 라이브러리를 사용하지 않고 state만 사용한다면 다음 문제점이 발생한다. 상태 객체가 너무 복잡하고 크다. 최상위 컴포넌트에서 상태 관리를 하는 메서드를 너무 많이 만들어 코드가 복잡하다. 하위 컴포넌트에 props를 전달하려면 여러 컴포넌트를 거쳐야한다. 01.14.1. 작업 환결설정 -- create-react-app 로 프로젝트 생성 $ create-react-app redux-sample yarn을 사용하여 redux와 react-redux를 설치 $ cd redux-sample $ yarn add redux react-redux $ yarn eject react-redux는 리액트 컴포넌트에서 리덕스를 더욱 간편하게 사용할 수 있게 하는 라이브러리이다. 01.14.2. 프로젝트 초기 설정 src 디렉터리 내부에 필요없는 파일 제거 App.css App.js App.test.js logo.svg src 디렉터리 하위에 디렉터리 생성 actions: 액션 타입과 액션 생성자 파일을 저장 components: 컴포넌트의 뷰가 어떻게 생길지만 담당하는 프리젠테이셔널(presentational) 컴포넌트 저장 containers: 스토어에 있는 상태를 props로 받아 오는 컨테이너(container) 컴포넌트들을 저장 reducers: 스토어의 기본 상태 값과 상태의 업데이트를 담당하는 리듀서 파일들을 저장 lib: 일부 컴포넌트에서 함께 사용되는 파일을 저장 01.14.3. 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트는 리덕스를 사용하는 프로젝트에서 자주 사용하는 구조로 멍청