#PropTypes

Props의 타입을 확인하기 위한 도구
(like. Flow, TypeScript같은 정적 타이핑 도구)

#Reconciliation

UI 갱신에 대한 React의 접근법
(1) Virtual DOM

• 가상의 표현을 메모리에 저장하고 실제 DOM과 동기화하는 과정 === 재조정

(2) Design Principles

• 리액트가 무엇을 하고 무엇을 하지 않는지에 대한 개발 철학
• 리액트의 스케쥴링 업데이트(setState가 비동기적인 이유)

💻REDUX

#단일 스토어를 만드는 법 & 리액트에서 스토어 사용하는 법

• import redux
• 액션을 정의하고, 액션을 사용하는, 리듀서를 만들고, 리듀서들을 합친다.
• 최종 합쳐진 리듀서를 인자로, 단일 스토어를 만든다.
• import react-redux
• connect 함수를 이용해서 컴포넌트에 연결

npx create-react-app redux-start
cd redux-start
npm i redux

#리덕스의 액션

• { type: 'TEST' } // payload 없는 액션
• { type: 'TEST', params: 'hello' } // payload 있는 액션

#리덕스의 액션 생성자

function 액션생성자(...args) { return 액션; }

#액션 준비 코드

// actions.js
// 액션의 type 정의
// 액션의 타입 => 액션 생성자 이름
// ADD_TODO => addTodo
export const ADD_TODO = 'ADD_TODO';
// 액션 생산자
// 액션의 타입은 미리 정의한 타입으로 부터 가져와서 사용하며,
// 사용자가 인자로 주지 않습니다.
export function addTodo(text) {
 return { type: ADD_TODO, text }; // { type: ADD_TODO, text: text }
}

#리덕스의 리듀서

• 액션을 받아서 스테이트를 리턴하는 구조

function 리듀서(previousState, action) { 
 return newState;
}