Store 생성 const store = createStore('reducer'); import { createStore } from "redux"; import {todoApp} from './reducers'; const store = createStore(todoApp); export default store;

Action을 받아서 새로운 State를 return 1 2 3 function reducer(previousState, action) { return newState; } Colored by Color Scripter cs 12345678910111213import { ADD_TODO } from './actions'; const initialState = []; function todoApp(previousState = initialState, action) { if(action.type === ADD_TODO) { return [...previousState, action.todo]; } //push 사용 안됨. return previousState;}Colored by Color Scriptercs

Action 정의 Reducer 만들기 Reducer를 인자로 단일 Store를 만든다. Redux의 Action 형태 {type: 'TEST'} // payload 없음 {type: 'TEST', params: 'test1'} //payload 존재 function 액션생성자(...args) { return 액션; } createTest('test1'); // {type: 'TEST', params: 'test1'}을 리턴 Redux의 Action이 하는 일 action 생성자에서 액션을 만듬 action 객체를 redux store에 보냄 redux store가 action 객체를 받으면 store의 상태 값이 변경 변경된 상태값을 사용하고 있는 component가 변경 12345export cons..

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 생성 2. 같은 타입의 두 엘리먼트는 attribute을 업데이트 시킴 3. 같은 타입의 두 컴포넌트는 mount, unmount를 하지 않고 컴포넌트를 업데이트 시킴 getDerivedStateFromProps로 확인 가능. Class Component는 shouldComponentUpdate를 통해 두 Props를 비교 Function Component는 React.memo를 이용

Redirect 사용 예 로그인이 된 상태면 홈으로, 로그인이 안되어 있으면 로그인 페이지로 이동할 때 사용 아래와 같이 render props와 같이 사용함. {isLogin ? : )} />

페이지 이동시 를 이용해 다른 페이지로 이동하면, 서버로부터 새로운 파일을 가져와 렌더링함. 사용 시에는 이미 가져온 파일로부터 이동하려는 페이지 View를 보여줌