react 메모장

루트 리듀서에 등록하기 : src/modules/index.ts 투두리스트 컴포넌트 준비하기 필요한 컴포넌트 미리 정하기 - 각 컴포넌트는 하나의 동작만 하도록. modules/ action 1. 액션의 타입을 정하고 // vue.js의 mutation-type 2. 액션 생성 함수를 선언한다. - { createStandardAction } from ‘typesafe-actions’ 이용 types 1. action에서 정한 액션 타입을 하나로 묶어 타입을 정의한다. - export type TodosAction = ActionType; 2. 데이터 타입 정의한다. r...

더보기

Redux 정리

액션 (Action) 액션 객체는 반드시 type 필드를 가져야 한다. 액션 생성함수 (Action Creator) 액션 객체를 만드는 함수이다. 파라미터를 payload로 통일하기도 한다. Reducer 리듀서는 변화를 일으키는 함수이다. 파라미터는 (state, action) 두 개이다. Store 스토어 안에는 현재의 앱 상태와, 리듀서와, 몇가지 내장 함수들이 있다. dispatch 스토어의 내장 함수 중 하나이며, 액션을 발생시킨다. dispatch에는 액션을 파라미터로 전달한다. 스토어는 reducer 함수를 실행시켜 해당 액션을 통해 새로운 상태를 만든다. subscribe 함수 ...

더보기

React babel 알아보기

babel은 컴파일러다. ES6(ECMAScript 2015), ES7와 같은 최신 문법이 호환되지 않는 브라우저가 있기 때문에 브라우저가 이를 이해할 수 있도록 컴파일 해주는 도구이다. babel-polyfill babel-polyfill이 없다면 babel은 브라우저에서 실행되지 않는다. polyfill은 브라우저에 따라 호환되지 않는 문법을 사용한 객체에 prototype을 설정해준다. .babelrc .babelrc는 프로젝트의 최상단에 위치해야 한다. plugins는 문법들이라 보면 되고, preset은 여러 개가 묶여있는 개념이다. 대표적으로 ES6 문법을 모아놓은 es2015 preset과 re...

더보기

--save 와 --save-dev

–save plugin이 ./node_modules에 설치되고 package.json 내의 dependencies에 추가된다. –production 빌드시 해당 plugin이 포함되지 않는다. –save-dev plugin이 ./node_modules에 설치되고 package.json 내의 decDependencies에 추가된다. –production 빌드시 해당 plugin이 포함되지 않는다.

더보기

React 3

기본 react 3 react-router-dom 을 이용하여 네비게이션을 만들 수 있다. npm i react-router-dom 자세한 것은 react-router-dom에서 알아보자. 참고 노마드 코더 youtube

더보기

React Hooks 리액트 훅

React Hook 리액트 훅을 사용하면 함수형 컴포넌트로도 state를 다룰 수 있다. (클래스 컴포넌트보다 더 편하게 !) useState const App = () => { const [count, setCount] = useState(0); // 배열 [value, value를 변경하는 함수] 를 반환 const [email, setEmail] = useState(""); const updateEmail = e => { const { target: { value } } = e; setEmail(value); }; return ( <...

더보기

React life cycle 라이프사이클

React의 component는 Life cycle은 가지는데, 특정 시점에 호출되는 메서드가 있다. 이를 라이프 사이클 이벤트라고 한다. 라이프사이클마다 주로 사용되는 메소드만 정리하였다. 각 메소드는 반드시 순서대로 실행된다. mounting 1. constructor() 2. render() 3. componentDidMount() componentDidMount : AJAX, Timer를 주로 작성한다. updating 1. render() 2. componentDidUpdate() unmounting 1. componentWillUnmount() componentWillUnmount : ...

더보기

React 2

기본 react 2 prop-types 를 이용하여 props의 데이터 유효성을 검증할 수 있다. npm i prop-types Animal.propTypes = { type: PropTypes.string.isRequired, legs: PropTypes.number.isRequired } 자세한 것은 prop-types에서 알아보자. class component function Animal({ type, legs }){ console.log(type) // dog console.log(legs) // 4 return <div>type is {ty...

더보기